使用bootstrap typeahead输入框自动补全之 问题与解决

根据网上查找到的 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" />
时间: 2024-10-06 01:20:16

使用bootstrap typeahead输入框自动补全之 问题与解决的相关文章

jquery的输入框自动补全功能+ajax

jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端 内容参考网友文章写成,原博的链接找不到了,但是感谢分享! 效果图: 涉及到ajax请求我这里本地请求不到数据就先放测试代码,在文章的最后会放上ajax代码: 用来测试的代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset

Eclipse中输入变量会自动补全上屏的解决方法

我自己在启动Eclipse代码补全后输入感觉确实爽多了,但是每次输入变量后一按下空格,编译器会自己帮你写一个很蛋疼的名字,比如你输入了:String mStr后按下空格,它就变成了mString,十分讨厌.下面是正规的解决办法,但是经过我反复折腾,我实在没办法把插件的源码显示到工程中.于是偷个懒去网上下载了已经修改好的jar包,成功搞定. 我自己复制jar包的目录是:D:\Work Appliactions\adt-bundle-windows-x86-20140702\eclipse\plug

输入框自动补全功能

在输入框输入信息后,自动提示补全.我选择用typeahead.js,后来发现,原来这个库的相关学习资料很少,搞的稍微有点久,才弄明白点...本文实属原创,如有错误,敬请指教! 简介: 官网:http://twitter.github.io/typeahead.jsgithub: https://github.com/twitter/typeahead.js使用文档:https://www.awesomes.cn/repo/twitter/typeahead-js 在查资料的过程中,不难发现,ty

复利计算器(4)——界面美化、自动补全

一.分工 这次终于可以跟小伙伴合作了,经过讨论,我负责界面的美化和输入框自动补全,小伙伴擅长安卓,于是将复利计算器弄成app的任务就交给了小伙伴. 二.界面美化 1.弹框提示 思路:弹框提示显示是浏览器自带,所以难免会难看些(如图一),因此引进一些jQuery的插件,将弹框美化(如图二) 图一 图二 实现:从网上下载相应的插件的jar包,将jar包引用到相应的项目中,只要在项目中写就可以实现layer.alert("请在复利金额输入框输入正数(保留两位小数)!", {icon: 100

【Bootstrap】 typeahead自动补全

typeahead 这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用. Bootstrap提供typeahead组件来完成自动补全功能. 两种用法: 直接给标签添加属性 <input type="text" data-provide="typeahead"> 通过设置autocomplete="off"来关闭浏览器自带的自动补全功能,以防跟我们的产生冲突. 通过JavaScript 调用$('.typeahe

c#TextBox输入框自动提示、自动完成、自动补全功能

功能概览 相关属性 TextBox.AutoCompleteCustomSource 属性 获取或设置当 TextBox.AutoCompleteSource 属性设置为 [CustomSource] 时要使用的自定义 T:System.Collections.Specialized.StringCollection. TextBox.AutoCompleteMode 属性 获取或设置一个选项,该选项控制自动完成应用于 TextBox 的方式. 属性值 类型:System.Windows.For

JS实现在输入框内输入@时,邮箱账号自动补全

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>邮箱自动补全</title> <style type="text/css"> .wrap{width:200px;margin:0 auto;} h1{font-size:36px;text-align:center;lin

Framework7新版学习笔记之 自动补全输入框(AutoComplete)

一:自动补全输入框 我们可以定义一种具有自动补全功能的输入框,预先设定一些可选值作为自动补全内容.当用户输入可选值的部分内容时,就会在下面自动列出匹配的选项,点击即可自动填充对应的选项. 二:定义自动补全输入框 <div class="item-input-wrap"> <input id="autocomplete-dropdown" type="text" placeholder="提示文本"> &

表单自动补全功能:

bootstrap的bootstrap-typeahead.js jQuery的autocomplete.js js实现自动补全 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .aut