经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
请扫描分享到朋友圈1395人阅读
这个问题的出现的前提是本站代码采用utf-8格式，当页面停留在搜索页面时，在浏览器的地址栏输入中文的关键字进行搜索时会出现乱码，在网上查找资料说明，是因为浏览器默认将url中的中文字符编码为gb;式，而我的程序中的文件编码是使用的utf-8的格式，所以才会出现这个问题，但是如果是直接使用表单提交的数据就不会出现这种问题。解决办法如下，需要PHP开启mb_string支持。
if (!mb_check_encoding($word, 'utf-8')){
$word = iconv('gb2312', 'utf-8', $word);
就是这么简单，记录下来，方便以后查找。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：35576次
排名：千里之外
原创：55篇
(1)(2)(1)(4)(1)(4)(7)(3)(1)(2)(1)(17)(13)你好，草根
切换简/繁体:
标题&作者&&搜索
&你的路径:
基于jquery实现的类似百度搜索的输入框自动完成功能
[日期：]&&&&来源：&&&&
作者：&&&&[字体：
]&&&&阅读： 次
废话不多说，直观的看一下：
　　实现这个功能需要服务端配合。客户端通过脚本来展示从服务端取得的数据。
　　先看客户端的HTML：复制代码 代码如下:
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&搜索词自动完成&/title&
&style type="text/css"&
text-align: position: } .autocomplete{ border: 1px solid #9ACCFB; background-color: text-align: } .autocomplete li{ list-style-type: } .clickable { cursor: } .highlight { background-color: #9ACCFB; } &/style& &script type="text/javascript" src="jquery.js"&&/script& &script type="text/javascript"& $(function(){ //取得div层 var $search = $('#search'); //取得输入框JQuery对象 var $searchInput = $search.find('#search-text'); //关闭提供给输入框的自动完成 $searchInput.attr('autocomplete','off'); //创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置 var $autocomplete = $('&div class="autocomplete"&&/div&') .hide() .insertAfter('#submit'); //清空下拉列表的内容并且隐藏下拉列表区 var clear = function(){ $autocomplete.empty().hide(); }; //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏 $searchInput.blur(function(){ setTimeout(clear,500); }); //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，想百度搜索那样 var selectedItem = //timeout的ID var timeoutid = //设置下拉项的高亮背景 var setSelectedItem = function(item){ //更新索引变量 selectedItem = //按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0 if(selectedItem & 0){ selectedItem = $autocomplete.find('li').length - 1; } else if(selectedItem & $autocomplete.find('li').length-1 ) { selectedItem = 0; } //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景 $autocomplete.find('li').removeClass('highlight') .eq(selectedItem).addClass('highlight'); }; var ajax_request = function(){ //ajax服务端通信 $.ajax({ 'url':'/test/index.jsp', //服务器的地址 'data':{'search-text':$searchInput.val()}, //参数 'dataType':'json', //返回数据类型 'type':'POST', //请求类型 'success':function(data){ if(data.length) { //遍历data，添加到自动完成区 $.each(data, function(index,term) { //创建li标签,添加到下拉列表中 $('&li&&/li&').text(term).appendTo($autocomplete) .addClass('clickable') .hover(function(){ //下拉列表每一项的事件，鼠标移进去的操作 $(this).siblings().removeClass('highlight'); $(this).addClass('highlight'); selectedItem = },function(){ //下拉列表每一项的事件，鼠标离开的操作 $(this).removeClass('highlight'); //当鼠标离开时索引置-1，当作标记 selectedItem = -1; }) .click(function(){ //鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中 $searchInput.val(term); //清空并隐藏下拉列表 $autocomplete.empty().hide(); }); });//事件注册完毕 //设置下拉列表的位置，然后显示下拉列表 var ypos = $searchInput.position(). var xpos = $searchInput.position(). $autocomplete.css('width',$searchInput.css('width')); $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"}); setSelectedItem(0); //显示下拉列表 $autocomplete.show(); } } }); }; //对输入框进行事件注册 $searchInput .keyup(function(event) { //字母数字，退格，空格 if(event.keyCode & 40 || event.keyCode == 8 || event.keyCode ==32) { //首先删除下拉列表中的信息 $autocomplete.empty().hide(); clearTimeout(timeoutid); timeoutid = setTimeout(ajax_request,100); } else if(event.keyCode == 38){ //上 //selectedItem = -1 代表鼠标离开 if(selectedItem == -1){ setSelectedItem($autocomplete.find('li').length-1); } else { //索引减1 setSelectedItem(selectedItem - 1); } event.preventDefault(); } else if(event.keyCode == 40) { //下 //selectedItem = -1 代表鼠标离开 if(selectedItem == -1){ setSelectedItem(0); } else { //索引加1 setSelectedItem(selectedItem + 1); } event.preventDefault(); } }) .keypress(function(event){ //enter键 if(event.keyCode == 13) { //列表为空或者鼠标离开导致当前没有索引值 if($autocomplete.find('li').length == 0 || selectedItem == -1) {
} $searchInput.val($autocomplete.find('li').eq(selectedItem).text()); $autocomplete.empty().hide(); event.preventDefault(); } }) .keydown(function(event){ //esc键 if(event.keyCode == 27 ) { $autocomplete.empty().hide(); event.preventDefault(); } }); //注册窗口大小改变的事件，重新调整下拉列表的位置 $(window).resize(function() { var ypos = $searchInput.position(). var xpos = $searchInput.position(). $autocomplete.css('width',$searchInput.css('width')); $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"}); }); }); &/script& &/head& &body& &div id = "search"& &label for="search-text"&请输入关键词&/label&&input type="text" id="search-text" name="search-text" /& &input type="button" id="submit" value="搜索"/& &/div& &/body& &/html&
服务端的代码，我们这里选择JSP，也可以使用PHP，服务端无所谓，关键是传送数据。 复制代码 代码如下: &%@ page language="java" import="java.util.*" pageEncoding="utf-8"%& &% String []words = {"amani","abc","apple","abstract","an","bike","byebye", "beat","be","bing","come","cup","class","calendar","china"}; if(request.getParameter("search-text") != null) { String key = request.getParameter("search-text"); if(key.length() != 0){ String json="["; for(int i = 0; i & words. i++) { if(words[i].startsWith(key)){ json += "\""+ words[i] + "\"" + ","; } } json = json.substring(0,json.length()-1&0?json.length()-1:1); json += "]"; System.out.println("json:" + json); out.println(json); } } %&
整个过程思路其实挺清晰的，首先在输入框上注册keyup事件，然后在事件中通过ajax获取json对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当我们点击每一项的时候，就可以响应事件。键盘导航的关键是记录当前高亮的索引值，根据索引值来调整背景高亮。显示下拉列表的位置要根据输入框的位置来设置，当浏览器的大小改变时，随时调整下拉列表的位置。 JQuery是web前端的利器，有机会的话，大家一定要看一下。
相关新闻 & & &
本文评论 　　 (0)
保证不乱说&发表当前位置：&>&&>&
> url 全局变量
php URL各部分获取方法(全局变量)
发布时间：编辑：sunday01
php URL各部分获取方法(全局变量)，主要介绍php全局变量$_SERVER的用法，首先列出了各变量的相关说明，最后给了两个小例子，学习如何获取php url各部分值的好资料。
php URL各部分获取方法()，主要介绍php全局变量$_SERVER的用法，有需要的朋友，可以参考下。
1、$_SESSION['PHP_SELF'] & 获取当前正在执行脚本的文件名
2、$_SERVER['SERVER_PROTOCOL'] & 请求页面时通信协议的名称和版本。例如，&HTTP/1.0&。
3、$_SERVER['REQUEST_TIME'] & 请求开始时的时间戳。从 PHP 5.1.0 起有效。和time函数效果一样。
4、$_SERVER['argv'] & 传递给该脚本的参数。我试了下，get方法可以得到$_SERVER['argv'][0]；post方法无法给他赋值。
5、$_SERVER['SERVER_NAME'] & 返回当前主机名。
6、$_SERVER['SERVER_SOFTWARE'] & 服务器标识的字串，在响应请求时的头信息中给出。 如Microsoft-IIS/6.0
7、$_SERVER['REQUEST_METHOD'] & 访问页面时的请求方法。例如：&GET&、&HEAD&，&POST&，&PUT&。
8、$_SERVER['QUERY_STRING'] & 查询（query）的（URL 中第一个问号 ? 之后的内容）。
9、$_SERVER['DOCUMENT_ROOT'] & 当前运行脚本所在的文档根目录。在服务器配置文件中定义。 如E:\server
10、$_SERVER['HTTP_ACCEPT'] & 当前请求的 Accept: 头信息的内容。
11、$_SERVER['HTTP_ACCEPT_CHARSET'] & 当前请求的 Accept-Charset: 头信息的内容。例如：&iso-8859-1,*,utf-8&。
12、$_SERVER['HTTP_ACCEPT_ENCODING'] & 当前请求的 Accept-Encoding: 头信息的内容。例如：&&。
13、$_SERVER['HTTP_ACCEPT_LANGUAGE'] & 当前请求的 Accept-Language: 头信息的内容。例如：&en&。
14、$_SERVER['HTTP_CONNECTION'] & 当前请求的 Connection: 头信息的内容。例如：&Keep-Alive&。
15、$_SERVER['HTTP_HOST'] & 当前请求的 Host: 头信息的内容。
16、$_SERVER['HTTP_REFERER'] & 链接到的前一页面的 URL 地址。
17、$_SERVER['HTTP_USER_AGENT'] & 返回用户使用的浏览器信息。也可以使用 get_browser() 得到此信息。
18、$_SERVER['HTTPS'] & 如果通过https访问，则被设为一个非空的值，否则返回off.
19、$_SERVER['REMOTE_ADDR'] & 正在浏览当前页面用户的 IP 地址。
20、$_SERVER['REMOTE_HOST'] & 正在浏览当前页面用户的主机名。反向解析基于该用户的 REMOTE_ADDR。如本地测试返回127.0.0.1
21、$_SERVER['REMOTE_PORT'] & 用户连接到服务器时所使用的端口。我在本机测试没通过，不知道什么原因。
22、$_SERVER['SCRIPT_FILENAME'] & 当前执行脚本的绝对路径名。如返回E:\server\index.php
23、$_SERVER['SERVER_ADMIN'] & 该值指明了 Apache 服务器配置文件中的 SERVER_ADMIN 参数。如果脚本运行在一个虚拟主机上，则该值是那个虚拟主机的值
24、$_SERVER['SERVER_PORT'] & 服务器所使用的端口。默认为&80&。如果使用 SSL 安全连接，则这个值为用户设置的 HTTP 端口。
25、$_SERVER['SERVER_SIGNATURE'] & 包含服务器版本和虚拟主机名的字符串。
26、$_SERVER['PATH_TRANSLATED'] & 当前脚本所在文件系统（不是文档根目录）的基本路径。这是在服务器进行虚拟到真实路径的映像后的结果。
Apache 2 用 户可以使用 httpd.conf 中的 AcceptPathInfo On 来定义 PATH_INFO。
27、$_SERVER['SCRIPT_NAME'] & 包含当前脚本的路径。这在页面需要指向自己时非常有用。__FILE__ 包含当前文件的绝对路径和文件名（例如包含文件）。
28、$_SERVER['REQUEST_URI'] & 访问此页面所需的 URI。例如，&/index.html&。
29、$_SERVER['PHP_AUTH_DIGEST'] & 当作为 Apache 模块运行时，进行 HTTP Digest 认证的过程中，此变量被设置成客户端发送的&Authorization&HTTP 头内容（以便作进一步的认证操作）。
30、$_SERVER['PHP_AUTH_USER']& 当 PHP 运行在 Apache 或 IIS（PHP 5 是 ISAPI）模块方式下，并且正在使用 HTTP 认证功能，这个变量便是用户输入的用户名。
31、$_SERVER['PHP_AUTH_PW'] & 当 PHP 运行在 Apache 或 IIS（PHP 5 是 ISAPI）模块方式下，并且正在使用 HTTP 认证功能，这个变量便是用户输入的密码。
32、$_SERVER['AUTH_TYPE']&当 PHP 运行在 Apache 模块方式下，并且正在使用 HTTP 认证功能，这个变量便是认证的类型。
附：使用parse_url函数获取URL各个部分
复制代码 代码示例:
$url = &/php-extract-domain-from-full-url/&;
$parts = parse_url($url);
[scheme] =& http
[path] =& /php-extract-domain-from-full-url/
复制代码 代码示例:
$url = 'http://username:password@/path?arg=value#anchor';
(parse_url($url));
echo parse_url($url, PHP_URL_PATH);
[scheme] =& http
[host] =& hostname
[user] =& username
[pass] =& password
[path] =& /path
[query] =& arg=value
[fragment] =& anchor
很容易便分解出一个URL的各个部，取指定的部分出来也很容易：
echo parse_url($url, PHP_URL_PATH);
在第二个参数中，设定如下的参数:
PHP_URL_SCHEME, PHP_URL_HOST, PHP_URL_PORT, PHP_URL_USER, PHP_URL_PASS, PHP_URL_PATH, PHP_URL_QUERY or PHP_URL_FRAGMENT。
本文标题：
本页链接：
12345678910微信公众号
jquery入门篇 设置css 给input赋取与获取input输入框值代码
Loading...
jquery入门篇 设置css教程 给input赋取与获取input输入框值代码
&script language=&网页特效&&
$('#linkflash').css('display','none');//给linkflash设置css
$(&#linkl&).val('');//给linkl赋值
$(&#link_url&).val();//获取link_url值
&div id=&linkflash&&加载我会被jquery隐藏哦&/div&
&input id=&link_url& type=&text& value=&jquery获取到我的值& /&
&input id=&linkl& type=&text& value=&给我赋值& /&
相关推荐:1、2、3、4、5、6、7、8、9、10、
相关微信头条:1、2、3、4、5、6、7、8、9、10、
猜你喜欢:1、2、3、4、5、6、7、8、9、10、
推荐电影:1、2、3、4、5、6、7、8、9、10、
热门关键词:
随机关键词:
正在加载...
热评文章评分 4.3, 满分 5 星10 票评分 3.9, 满分 5 星10 票评分 3.8, 满分 5 星10 票评分 3.7, 满分 5 星10 票评分 3.6, 满分 5 星10 票
最新微信头条