Problems and solutions of automatic completion of input box using bootstrap Typeahead

According to the Typeahead use method found on the Internet, there was an error in the last step, the data can be read from the database, but when the input box shows prompt, it is all shown as: underfined. I can't find out where the problem is in half a day. Later on the http://blog.64cm.com/post/2014/08/13/%E4%BD%BF%E7%94%A8bootstrap-typeahead%E6%8F%92%E4%BB%B6 inadvertently found such a sentence: " In the current version of Typeahead, it is no longer supported to call the Ajax method directly in the source property to get the data source. "reminds me, because I am based on the method of the Internet, is to call the Ajax method directly in source.

Back now the ACE demo, although there is no Ajax example, but there are comments to explain how to use, but the use of English (digression: To do technical understanding of English is really important. ), after a turn debugging, finally can display correctly. The post code is as follows:

JS Code

<script type= "Text/javascript" >JQuery (function($) {                //Typeahead.js        //example taken from plugin ' s page at:https://twitter.github.io/typeahead.js/examples/        varSubstringmatcher =function() {//Substringmatcher () method            return functionFindmatches (query, process) {//query is equipped with the keyword, PROCESSJ is the value returned                varmatches, Substringregex; varparams = {"token": GetStorage ("token"), "flag": 0, "name": Query}; varParameter_str= "";  for(varKeyinchparams) {Parameter_str+ = "&" +key+ "=" +Params[key]; }                      varFullurl=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 ("List:" +getoption ("Connectionerrormessage")); }, Success:function(data) {//$ ("#submenu_info"). HTML (fullurl);                            if(data.code==0){                                varArr,substringregex; Arr=[]; Substrregex=NewREGEXP (query);//this must be, or it will be shown as underfined                                     for(varIteminchdata.data) {                                        varStr=Data.data[item].name; if(Substrregex.test (str)) {//The typeahead JQuery plugin expects suggestions to a                                            //JavaScript object, refer to Typeahead docs for more infoArr.push ({value:str}); }} process (                                                                ARR); }                        }                    })                             }        }         $(' Input.typeahead '). Typeahead ({hint:true, highlight:true, MinLength:1}, {name:' States ', Displaykey:' Value ', Source:substringmatcher ()//the current version of the Source property cannot call the Ajax method directly to get the data source, via the Substringmatcher () method                     }); });</script>

Html

<!--inline scripts related to this page -<Scriptsrc=".. /assets/js/ace-elements.js "></Script><Scriptsrc=".. /assets/js/typeahead.jquery.js "></Script><inputtype= "text"ID= "Name"placeholder= "Institution name"class= "col-xs-10 col-sm-5 typeahead scrollable"value=""AutoComplete= "Off" />

Problems and solutions of automatic completion of input box using bootstrap Typeahead