使用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 继承详解(三)
Jul 13 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
javascript中的this详解
Dec 08 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
Openlayers实现图形绘制
Sep 28 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简单生成随机数的方法
2015/07/30 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
详解python之配置日志的几种方式
2017/05/22 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python numpy中cumsum的用法详解
2019/10/17 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
机电一体化专业毕业生自荐信
2014/06/19 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
大学生创业事迹材料
2014/12/30 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python
oracle索引总结
2021/09/25 Oracle
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server