使用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之文件操作
Mar 07 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
使用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
DC动漫人物排行
2020/03/03 欧美动漫
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
我的论坛源代码(七)
2006/10/09 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Angular脚手架开发的实现步骤
2019/04/09 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
django2 快速安装指南分享
2018/01/05 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
python不同版本的_new_不同点总结
2020/12/09 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
农民入党思想汇报
2014/01/03 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
法制宣传标语集锦
2014/06/25 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL