autoComplete实现的输入下拉联想功能

下拉联想类似与百度的搜索关键词联想功能。用户在输入框中输入关键字后，会出现与其相关的下拉选项供用户选择；从而提高用户体验。

而下拉选项与关键字的匹配关系，根据不同的产品、需求，有不同的实现。如根据热度、相关度、字符匹配度等等。而我在项目中实际用到的是jquery UI的autoComplete 小部件（widgets）来实现。

使用方法：引用jquery、jquery UI; $(xx).autocomplete(类似ajax格式的配置项);

关于具体的配置项参考API----http://www.jqueryui.org.cn/api/3746.html

autoComplete 比较轻量，它的关联过滤匹配是根据字符串匹配的，并且过滤的实现均在前端。所以autoComplete 需要先给前端赋值（无论是本地数据还是远程数据）。这就决定了它只适用与数据量比较小的场景。数据量过大导致关键字匹配卡顿，影响体验。（体现复杂运算在后端的原则）

autoComplete 主要是整合了input 与下拉框，下拉的数据源可以是数组、json字符串（返回json的url）、和包含了request、responce处理数据的Function。使用autoComplete 的基本要素为source、select、minLength；具体的demo可以查看上面的地址。代码没有太多技术含量；唯熟API 则耳！

以下为实际项目中的代码：source 选择数据比较稳妥，先在$(function()) 用ajax获取后台数据，构建数组。select配置项用于定义选择选项时的代码处理。

var dataAarr = new Array();$.ajax({url: "url",dataType: "jsonp",jsonp:'callback',  jsonpCallback:"successCallback",success: function( json ) {var data = eval(json);// alert(data[0].DWMC);for (var i = 0; i < data.length; i++) {dataAarr[i] = data[i].DWMC;}}});$("#tags1").autocomplete({source: dataAarr,select: function( event, ui ) {// alert($("#tags1").val());var l = ui.item.value;// alert(l);$.ajax({url: "http://127.0.0.1:8080/fuwuguanlixitong/weiXinRuZhuAction/getDanWeiXinXi_Single?DWMC="+l+"",dataType: "jsonp",jsonp:'callback',  jsonpCallback:"successCallback",success:function(json){var data = eval(json);//数据处理代码}});}});

举一反三：在前端整合了input和select的情况下；利用ajax实现输入下拉联想的功能。思路：事件监听取关键字，后台处理数据返回，前端显示。

把数据过滤放在后端，可以按需过滤数据、匹配数据；增加灵活性同时适用数据量大的场景。

转载于:https://www.cnblogs.com/Binblink/p/7719253.html

autoComplete实现的输入下拉联想功能相关推荐

单片机（STM32）的GPIO框图：─ 输入浮空 ─ 输入上拉 ─ 输入下拉 ─ 模拟输入 ─ 开漏输出 ─ 推挽式输出 ─ 推挽式复用功能 ─ 开漏复用功能
─ 输入浮空 ─ 输入上拉 ─ 输入下拉 ─ 模拟输入 ─ 开漏输出 ─ 推挽式输出 ─ 推挽式复用功能 ─ 开漏复用功能 GPIO框图保护电路: 高压保护--上拉二极管低压保护--下拉二极管输 ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
除了下拉框/下拉联想词优化推广，还可以做那些网络推广？
现在的企业,不能像几年前,单纯的搭建好网站或网络平台,具备了网络推广完善的功能,做做SEOer就万事大吉了. 因为这几年网络变化太大了,自媒体.小视频的爆发,所以现在我们更需要结合多平台多渠道多方位的 ...
LayUI可选择可输入下拉框
LayUI可选择可输入下拉框可输入的下拉框把input 叠加到select上,外观看起来像一个框. 利用z-index把 input框放到select 上层.并让select 不自动填充. 我现在 ...
搜索下拉框推广优化如何做？下拉联想词有什么优势？
下拉词也叫推荐词,就是让网友输入更少的词,看到更多与搜索词相关的推荐词.例如百度下拉词是百度搜索为方便用户搜索而提供的关键字关联服务,提高了用户的搜索效率.大多数人在搜索关键字时不知道如何组织语言以达 ...
Android m 自定义下拉菜单,Android实现动画效果的自定义下拉菜单功能
我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...
HTML下拉菜单去掉点,jQuery点击页面其他部分隐藏下拉菜单功能
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...
Android下拉刷新完全解析，教你如何一分钟实现下拉刷新功能（转）
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最近项目中需要用到ListView下拉刷新的功能,一开始想图省事,在 ...
mysql写下拉树_PHP+mysql实现从数据库获取下拉树功能的方法
这篇文章主要介绍了PHP+mysql实现从数据库获取下拉树功能,结合实例形式分析了php+mysql数据库查询及select下拉框输出查询结果的实现技巧,需要的朋友可以参考下本文实例讲述了PHP+m ...
Android ListView 疯狂之旅之《自定义下拉刷新功能的ListView》
效果图: 一首先创建一个类,继承ListView,编写其构造方法 public class RefreshListView extends ListView {public RefreshListV ...

autoComplete实现的输入下拉联想功能

autoComplete实现的输入下拉联想功能相关推荐

最新文章

热门文章