Problems and solutions of automatic filling of input box using bootstrap Typeahead plug-in _javascript tips

According to the online search Typeahead use method, to the last step error, the data can be read from the database, but when the input box display prompts, all appear as: underfined. You can not find out where the problem is. 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 invoke the Ajax method directly from the source property to get the data source . "Reminds me, because I am using the online method to invoke Ajax methods directly in source."

Back to the ACE demo now, although no Ajax examples are invoked, but there are annotations to explain how to use, but only in English (digression: To do technical understanding of English is really important. ), after a turn debugging, finally can correctly display. Post the code 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/var substringmatcher = function () {//substringmatcher () method return function Findmatches (query, process) {//query is the supplied keyword, PROCESSJ is the value returned 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 ("list:" +getoption ("Connectionerrormessage")); success: function (data) {//$ ("#submenu_info"). HTML (fullurl); if (data.code==0) {var arr,substringregex; arr=[]; Substrregex = new RegExp (query)//This must have, or display as underfined for (Var item in data.data) {var str= data.data[item].name; if (substrregex.t  EST (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: ' VA
Lue ', Source:substringmatcher ()//current version of the Source property can not directly invoke the Ajax method to obtain the data source, through the Substringmatcher () method});
});  </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=" organization name "class=" col-xs-10 col-sm-5 typeahead scrollable "value=" "autocomplete=" Off "/>

The above is a small set to introduce the use of bootstrap Typeahead plug-ins to implement the input box automatic completion of the problem and solutions, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!