使用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 相关文章推荐
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
使用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 8小时时间差的解决方法小结
2009/12/22 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
在python shell中运行python文件的实现
2019/12/21 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
python中return如何写
2020/06/18 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
应聘面试自我评价
2014/01/24 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
高中军训第一天感言
2014/03/06 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
小学班主任工作随笔
2015/08/15 职场文书
新学期开学寄语2016
2015/12/04 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android