jquery自动完成插件(autocomplete)应用之PHP版


Posted in Javascript onDecember 15, 2009

于工作中需要用到自动提示这个功能,呵呵,自己又是js小菜,于是百度了一下,找到一个用jquery与其插件autocomplete开发的.net版的自动完成功能,于是down下来了改成了php版的,并加了支持向上/向下选择文字等功能,放上来共享一下,纯体力活。。。 :)
1、下载jquery库,网址:http://jquery.com/ ;
2、下载jquery autocomplete插件或者直接使用我附件里提供的文件,自己下载下来的文件需要修改一些内容才能支持向上/向下选择文字、解决中文乱码,其中解决中文乱的问题网上有提到过,就是把文件中的encodeURI改成escape,还有把keydown修改成keyup即可,至于支持向上/向下选择文字请参看附件;
3、以下是调用代码:
auto.html内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script type="text/javascript" src="include/javascript/jquery.js"></script> 
<script type="text/javascript" src="include/javascript/jquery.autocomplete.js"></script> 
<link rel="stylesheet" type="text/css" href="include/javascript/jquery.autocomplete.css" /> 
<title>自动完成测试</title> 
</head> 
<body> 
<input type="text" name="keyword" id="search" size="30" /> 
<script language="javascript"> 
$(document).ready(function() { 
$("#search").autocomplete( 
"getindex.php", 
{ 
delay:10, 
minChars:1, 
matchSubset:1, 
matchContains:1, 
cacheLength:10, 
onItemSelect:selectItem, 
onFindValue:findValue, 
formatItem:formatItem, 
autoFill:false 
} 
); 
}); 
function findValue(li) { 
if( li == null ) return alert("No match!"); 
if( !!li.extra ) var sValue = li.extra[0]; 
else var sValue = li.selectValue; 
} 
function selectItem(li) { findValue(li);} 
function formatItem(row) { return row[0];//return row[0] + " (id: " + row[1] + ")"//如果有其他参数调用row[1],对应输出格式Sparta|896 
} 
function lookupAjax(){ 
var oSuggest = $("#search")[0].autocompleter; 
oSuggest.findValue(); 
return false; 
} 
</script> 
</body> 
</html>

getindex.php
<?php 
header("ContentType:text/plain;charset:gb2312"); 
define('SCRIPTNAV', 'getindex'); 
require_once './include/common.inc.php'; 
$keyWord=iconv('utf-8', 'gb2312', js_unescape($q)); 
$query = $db->query("SELECT DISTINCT(shopname) FROM {$dbpre}shops WHERE shopname LIKE '%$keyWord%' GROUP BY shopname ORDER BY addtime DESC LIMIT 0,10"); 
if($query) 
{ 
while ($result = $db->fetch_array($query)) 
{ 
echo $result['shopname']."\n"; 
} 
} 
//转换js escape提交过来数据 
function js_unescape($str) 
{ 
$ret = ''; 
$len = strlen($str); 
for ($i = 0; $i < $len; $i++) 
{ 
if ($str[$i] == '%' && $str[$i+1] == 'u') 
{ 
$val = hexdec(substr($str, $i+2, 4)); 
if ($val < 0x7f) $ret .= chr($val); 
else if($val < 0x800) $ret .= chr(0xc0|($val>>6)).chr(0x80|($val&0x3f)); 
else $ret .= chr(0xe0|($val>>12)).chr(0x80|(($val>>6)&0x3f)).chr(0x80|($val&0x3f)); 
$i += 5; 
} 
else if ($str[$i] == '%') 
{ 
$ret .= urldecode(substr($str, $i, 3)); 
$i += 2; 
} 
else $ret .= $str[$i]; 
} 
return $ret; 
} 
?>

附件如下:
http://xiazai.3water.com/200912/yuanma/jquery_autocomplete_php.rar
Javascript 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
vue实现百度搜索功能
Dec 28 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
Javascript attachEvent传递参数的办法
Dec 14 #Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 #Javascript
javascript document.execCommand() 常用解析
Dec 14 #Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 #Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 #Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 #Javascript
JQuery下关于$.Ready()的分析
Dec 13 #Javascript
You might like
PHP中路径问题的解决方案
2006/10/09 PHP
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP 翻页 实例代码
2009/08/07 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
pandas分区间,算频率的实例
2019/07/04 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Python 硬币兑换问题
2019/07/29 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
市场营销职业生涯规划书范文
2014/01/12 职场文书
个人查摆剖析材料
2014/02/04 职场文书
关于环保的演讲稿
2014/05/10 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
高中教师个人工作总结
2015/02/10 职场文书
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS