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函数分享
Jan 07 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
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
PHP 多维数组排序实现代码
2009/08/05 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
javascript中的this详解
2014/12/08 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
高中运动会入场词
2014/02/14 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
音乐教师求职信
2014/06/28 职场文书
无犯罪记录证明
2014/09/19 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
2016年少先队活动总结
2016/04/06 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python