做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了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));
}

js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用的更多相关文章

  1. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  2. js中给easyUI年份,月份选择下拉框赋值

    sp中定义 js中初始化 //年度下拉框初始化 $("#yearChoose").combobox({    valueField:'year',     textField:'y ...

  3. js中遍历出查询后的listmodel(下拉框系列)

    function selectclassname(){ $.ajax({ url:"queryschoolclasslists.action", async:false, data ...

  4. selenium-百度搜索框输入后,定位联想下拉框元素

    1.输入关键字后,显示联想下拉框,鼠标右键对应的联想字段,点击检查,就可在F12模式下元素查看器中定位到,之后使用Xpath定位.

  5. Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

  6. easyUI combobox下拉框很长,easyUI combobox下拉框如何显示滚动条的解决方法

    如下图,combobox下拉框里内容很多时,会导致下拉框很长,很不美观. 如何使得combobox下拉框显示滚动条 方法:把属性panelHeight:"auto"注释掉即可. $ ...

  7. Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载

    元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...

  8. avalon.js 多级下拉框实现

    学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...

  9. js多选下拉框

    1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...

  10. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

随机推荐

  1. 漂亮的自制java验证码

    网上有很多开源的验证码插件,例如jcaptcha,kaptcha等等...这些都不错,不过感觉用起来不太舒服,最后还是网上找了个原型的,然后在这个基础上修改下,效果还算不错,凑合用下,验证码要做到难以 ...

  2. linux的root登录password问题

    以Ubuntu为样例, 第一次登录root用户的时候,让输入password总是显示认证失败 由于安装Ubuntu的时候没有设置root的password.所以每次开机都会分配不同的rootpassw ...

  3. oracle数据库表空间及归档

    --表空间(TableSpace)是Oracle的开创性理念.表空间使得数据库管理更加灵活,而且极大地提高了数据库性能. --作用 :1.避免磁盘空间突然耗竭的风险 2.规划数据更灵活 3.提高数据库 ...

  4. android有点纠结的小问题

    1.点击一个listview的item,以popupwindow的形式展示一个菜单.popupwindow以动画的形式展现,可一直没有预期的效果 解决方案: popupWindow.setBackgr ...

  5. [WebGL入门]二,開始WebGL之前,先了解一下canvas

    年2月)HTML5依旧处于草案阶段. HTML5支持网页端的多媒体功能和画布功能,追加了非常多全新的更合理的Tag标签.各个浏览器也都在逐渐的完好这些新的特性. Canvas对象表示一个 HTML画布 ...

  6. pomelo 初始化配置...

    在创建app的时候会初始化master和server以及log配置.. /** * Initialize application configuration. */ module.exports.de ...

  7. javascript中的 "=="

    对象之间比较比较的是引用地址 对象和其他比较,转成字符串 字符串和数字比较,字符串转成数字 布尔值和任何比较,转成数字 undefined == null NaN 和谁都不相等 javascript权 ...

  8. java_jdbc_基本连接池

    MyDataSource实现封装连接池,MyConnection实现connection类,通过代理模式相互调用 package cn.itcast; import java.sql.*; publi ...

  9. Android_menu_SubMenu

    menu.xml <menu xmlns:android="http://schemas.android.com/apk/res/android" > <!-- ...

  10. HTML实现跳转到页面指定位置

    <a href="#page1">跳转到页面1</a> <a href="#page2">跳转到页面2</a> ...