首页 技术 正文
技术 2022年11月23日
0 收藏 474 点赞 4,493 浏览 2157 个字

做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete

效果如下图:

js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用

该插件托管在github上,具体地址:https://github.com/agarzola/jQueryAutocompletePlugin

官方的英文文档:http://api.jqueryui.com/autocomplete/

在使用过程中遇到大坑跟大家说一下。

第一个是插件的数据源问题!

如果要使用服务器的数据源需要在调用autocomplete的时候传入url的参数!

你可以看一下插件的js代码,它会把搜索的值以q发送到你指定的url

例如:ajaxSearchbyname.html?q=t&limit=10&timestamp=1439967678104

第二个问题是服务器提供的数据格式问题!

一般的使用这个插件的人都是需要从服务器获取数据来展示,而这个插件需要的不是纯的json数据,是需要你服务器按照他的规则拼接一下,具体格式是用\n换行符隔开的json,如下面示例所示:

注意:这里的字段是没有限制的,自己随便定义,等到调用插件的时候可以自己写一下处理函数来处理不同字段。这个示例给提供了三条数据,每一条数据之间是有一个换行符的!{"user_id":"","user_name":"test"}\n
{"user_id":"","user_name":"test1"}\n
{"user_id":"","user_name":"test4"}

给大家提供一下我的具体代码:

html:

<div class="form-group">
<label class="col-sm-2 col-md-2 control-label" for="user_name">负责人:</label>
<div class="col-sm-10 col-md-5">
<input type="text" class="form-control" id="user_name"
value="<?php echo isset($tplData['user_name']) ? $tplData['user_name'] : '' ?>">
<input type="hidden" name="user_id"
value="<?php echo isset($tplData['user_id']) ? $tplData['user_id'] : '' ?>">
</div>
</div>

javascript:

<link href='__PUBLIC__/Common/jquery.autocomplate/jquery.autocomplete.css' rel='stylesheet'>
<script src="__PUBLIC__/Common/jquery.autocomplate/jquery.autocomplete.js"></script>
<script>
$(function () {
$("#user_name").focus().autocomplete("<?php echo U('Admin/user/ajaxSearchbyname')?>", {
formatItem: function (row, i, max) {
console.log(row);
var obj = eval("(" + row + ")"); //转换成js对象
return obj.user_name;
},
formatResult: function (row) {
console.log(row);
var obj = eval("(" + row + ")"); //转换成js对象
return obj.user_name;
}
}).result(function (event, item) {
$('[name="user_id"]').val(JSON.parse(item).user_id);
}); $('#cancel').click(function (e) {
e.preventDefault();
window.location.reload();
});
});
</script>

PHP代码基于thinkphp:

/**
* 返回模糊搜索数据
*/
public function ajaxSearchbyname() {
$name = $this->getGet('q', '');
$page = $this->getGet('page', 1);
$condition = array();
if (!empty($name)) {
$condition['nick_name'] = array('like', "%$name%");
}
$userLogic = new userLogic();
$res = $userLogic->getPageList($condition, $page, 10);
$resultStrArr = array();
foreach ($res as $item) {
array_push($resultStrArr, json_encode(array('user_id' => $item['user_id'], 'user_name' => $item['user_name'])));
}
exit(implode("\n", $resultStrArr));
}

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/140551.html

下一篇: GCC编译器入门
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:7,142
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:4,476
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:567 阅读:5,291
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:5,163
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:6,335
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,874