使用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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
javascript基础知识讲解
Jan 11 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
vue backtop组件的实现完整代码
Apr 07 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判断网络文件是否存在的方法
2015/03/12 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
用jscript实现新建word文档
2007/06/15 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
基于python实现高速视频传输程序
2019/05/05 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
大学生饮食配送创业计划书
2014/01/04 职场文书
开展创先争优活动总结
2014/08/28 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
2014年教研室工作总结
2014/12/06 职场文书
python删除csv文件的行列
2021/04/06 Python