JQueryUI自动补全搜索提示实践

最近在做航运运价平台，有一个业务逻辑是需要在搜索的时候有搜索提示的，没法子，没写过，在找了很久解决方案还没有找到，快崩溃了的时候，忽然发现了jquery UI 的自动补全机制，完全符合啊，大救星。

首先描述下用户的需求，这里我们需要的是输入港口的英文名称或中文名称，然后出现搜索提示，当用户点击后，只将英文的放入搜索框中，因为运价里的港口都是英文字符，没有中文字符。

所以，我需要做的就是：1.将港口全部录入数据库 2.在用户输入的时候显示搜索提示 3.用户点击后显示英文字符。

OK，逻辑很清晰，开始动工。

数据输入数据库，这一步就不赘述了。

搜索提示的时候，用的是JQueryUI的自动补全机制

1. 对我们的输入表单应用自动补全。

$('#startport').autocomplete(option);

2. 从服务器端获取数据源，我这里应用ajax异步请求数据

/**************数据源为ajax返回的值**********************/source: function(request, callback) {var data = "term=" + request.term;$('#result').html(data);/*************ajax请求数据************************/$.get(appPath + "/Street/startportSearchTips", data, function(data) { var response = data.content;var tips = [];$(response).filter('li').each(function() {tips.push($(this).text());});callback(tips);});},

服务器端：

$querystring = $_GET['term'];  if(strlen($querystring) >0) { $condition['portname'] = array('like', "%$querystring%");$result = $startDB->where($condition)->limit(5)->select();$data['status'] = 0;foreach($result as $key => $value){$data['content'] .= '<li>'.$value['portname'].'</li>'; }  $data['term'] = $_GET['term'];$this->ajaxReturn($data);}else{$data = array('status' => 0, 'content' => '没有匹配');$data['test'] = "没有匹配";$data['term'] = $_GET['term'];$this->ajaxReturn($data); }

当服务器检索到数据后，按格式用ajax返回，然后在js里面接收，再转变成数组的形式，用回调函数返回给source，作为数据源

3. 让建议列表更好看点，设置下样式，这里是淡出的特效

/****************打开建议列表时的样式设置***************************/open:function(event){var $ul = $(this).autocomplete('widget');$ul.css('width', '200px');$ul.css('font-size', '14px');$ul.css('font-family', '微软雅黑');$ul.hide().slideDown(1000);},

4. 最后一步，选择某一项时，只上去英文字符，因为数据库中是间隔空格分开的，所以这里用空格截取

/****************在选择某一项的时候，只显示英文字符*****************/select: function(event, ui) {//截取英文字符var str = ui.item.value.substr(0, ui.item.value.indexOf(' '));return ui.item.value = str;}

最后的效果：

可以去我们的网站看看：《订单工厂》搜索提示演示

Tony, 2014.10.13 于TCS工作室

JQueryUI自动补全搜索提示实践相关推荐

Visual Assist x 无法自动补全Snippet提示的解决方法
Visual Assist x 无法自动补全Snippet提示的解决方法参考文章: (1)Visual Assist x 无法自动补全Snippet提示的解决方法 (2)https://www.cn ...
vs代码自动补全快捷键html,VSCode 自动补全(智能提示)
自动补全(智能提示) 由于以前微软推出了typescript语言,结合tsd文件,用visual studio写typescript代码是至关爽的,智能提示的功能很是nb.html 这个功能理所应当也 ...
vim代码自动补全函数提示设置
vim中不能代码补全让人感觉很不爽,以下配置就是进行代码补全的,虽然功能没有windows下IDE功能强大,但是也足够用了. 需要插件为:neocomplcache,OmniCppComplete,A ...
pycharm 自动补全代码提示前符号f，m , p，c，v是什么意思？
是自动补全的变量的类别 f:function 函数 p:parameter 参数 m:method 方法 c:class 类 v:variable 变量
Elasticsearch 分布式搜索引擎 -- 自动补全（拼音分词器、自定义分词器、自动补全查询、实现搜索框自动补全）
文章目录 1. 自动补全 1.1 拼音分词器 1.2.1 自定义分词器 1.2.2 小结 1.2 自动补全 1.3 实现酒店搜索框自动补全 1.3.1 修改酒店映射结构 1.3.2 修改HotelDo ...
vscode 取消按左括号，自动补全提示代码
1.问题你是否在使用 vsCode的时,输入一个函数,按了括号之后,会自动补全成提示的那个函数,但是那个函数并不是我们想输入的: 2.解决我们可以在vscode的设置中进行设置我们搜索:acce ...
华为快应用IDE：代码智能提示及自动补全
代码编辑工具的代码智能提示/自动补全功能几乎是所有代码编写工具具备的基础功能. 华为快应用IDE自然不能少了如此便利的功能,Template模板.Script脚本.Style样式.Pair-Tages ...
转：Eclipse自动补全功能轻松设置
Eclipse自动补全功能轻松设置 || 不需要修改编辑任何文件 2012-03-08 21:29:02| 分类: Java | 标签:eclipse 自动补全设置 |举报|字号订阅下 ...
Eclipse自动补全功能轻松设置 || 不需要修改编辑任何文件
本文介绍如何设置Eclipse代码自动补全功能.轻松实现输入任意字母均可出现代码补全提示框. Eclipse代码自动补全功能默认只包括点"." ,即只有输入".& ...

JQueryUI自动补全搜索提示实践

JQueryUI自动补全搜索提示实践相关推荐

最新文章

热门文章

JQueryUI自动补全 搜索提示实践

JQueryUI自动补全 搜索提示实践相关推荐

最新文章

热门文章

JQueryUI自动补全搜索提示实践

JQueryUI自动补全搜索提示实践相关推荐