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

sika西卡

sika西卡

2016-02-19 14:34

今天图老师小编要向大家分享个jquery自动完成插件(autocomplete)应用之PHP版教程,过程简单易学,相信聪明的你一定能轻松get!

打包下载

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)代码如下:
!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|($val6)).chr(0x80|($val&0x3f));
else $ret .= chr(0xe0|($val12)).chr(0x80|(($val6)&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;
}


展开更多 50%)
分享

猜你喜欢

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

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

jQuery autocomplete插件修改

Web开发
jQuery autocomplete插件修改

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

autocomplete禁止自动完成功能

Web开发
autocomplete禁止自动完成功能

AJAX应用之草稿自动保存

Web开发
AJAX应用之草稿自动保存

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jQuery TextBox自动完成条

Web开发
jQuery TextBox自动完成条

JQuery autocomplete 使用手册

Web开发
JQuery autocomplete 使用手册

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Java平台上的CRM系统

Java平台上的CRM系统

jquery 事件执行检测代码

jquery 事件执行检测代码
下拉加载更多内容 ↓