使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法


Posted in Javascript onJuly 07, 2016

根据网上查找到的 typeahead使用方法,到最后一步时就出错,数据能从数据库读取出来,但在输入框显示提示时,全都显为:underfined。捉摸了半天都发现不了问题出在哪儿。后来在http://blog.64cm.com/post/2014/08/13/%E4%BD%BF%E7%94%A8bootstrap-typeahead%E6%8F%92%E4%BB%B6 上不经意发现这么一句话:“在当前版本的typeahead中,已经不再支持在source属性中直接调用ajax方法获取数据源了。”提醒了我,因为我根据网上的方法,是直接在source中调用ajax方法。

再回头现在的ace demo,虽然没有调用ajax的示例,但也有注释说明如何用,只不过用的是英文(题外话:做技术的懂英语真的很重要。),经过一翻调试,终于能正确显示了。贴出代码如下:

js代码

<script type="text/javascript">
jQuery(function($) {
//typeahead.js
//example taken from plugin's page at: https://twitter.github.io/typeahead.js/examples/
var substringMatcher = function() {//substringMatcher()方法
return function findMatches(query, process) {//query 是配备的关键字,processj是返回的值
var matches, substringRegex;
var params = {"token": getStorage("token"), "flag":0,"name":query};
var parameter_str="";
for(var key in params){ 
parameter_str+="&"+key+"="+params[key];
} 
var fullurl=getOption("gykj_host")+"institution/list?"+getOption("gykj_callbackparam")+"="+getOption("gykj_callbackfunc")+parameter_str;
$("#submenu_info").html(fullurl);
$.ajax({
url:fullurl,
type:'get',
dataType:"jsonp",
jsonp:getOption("gykj_callbackparam"),
jsonpCallback:getOption("gykj_callbackfunc"),
async:false,
error:function(){
alert("列表:"+getOption("connectionErrorMessage"));
},
success:function(data){
//$("#submenu_info").html(fullurl);
if(data.code==0){
var arr,substringRegex;
arr=[];
substrRegex = new RegExp(query);//这必须有,要不还是显示为underfined
for(var item in data.data){
var str= data.data[item].name;
if (substrRegex.test(str)) {
// the typeahead jQuery plugin expects suggestions to a
// JavaScript object, refer to typeahead docs for more info
arr.push({ value:str});
}
}
process(arr);
}
}
})
}
}
$('input.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'states',
displayKey: 'value',
source: substringMatcher()//当前版本source属性中不能直接调用ajax方法获取数据源,通过substringMatcher()方法
});
});
</script>

html

<!-- inline scripts related to this page -->
<script src="../assets/js/ace-elements.js"></script>
<script src="../assets/js/typeahead.jquery.js"></script>
<input type="text" id="name" placeholder="机构名称" class="col-xs-10 col-sm-5 typeahead scrollable" value="" autocomplete="off" />

以上所述是小编给大家介绍的使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
flash javascript之间的通讯方法小结
Dec 20 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
JavaScript 实现继承的几种方式
Feb 19 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 #Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 #Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 #Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 #Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 #Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 #Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 #Javascript
You might like
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
JS实现轮播图效果
2020/01/11 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
Python之pymysql的使用小结
2019/07/01 Python
python 中如何获取列表的索引
2019/07/02 Python
python实现简单坦克大战
2020/03/27 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
高中生期末评语大全
2014/01/28 职场文书
校园文化建设方案
2014/02/03 职场文书
抽样调查项目计划书
2014/04/24 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
社会实践活动总结格式
2015/05/11 职场文书
《风筝》教学反思
2016/02/23 职场文书
2019同学聚会主持词
2019/05/06 职场文书
详解Redis复制原理
2021/06/04 Redis