在twitter typeahead的每个keyup上更新JSON

我有一个带有输入字段的html页面。 每次在这个字段中键入内容时，都会使用jQuery调用php脚本。

这个php脚本返回一个JSON，其中包含基于输入字段的特定查询的结果。

这工作正常，我在console记录输出。

     var r = jQuery(function($) { $('#name').keyup(function() { var input = $('#name').val(); var response = $.getJSON('get_names.php', {input: input}); response.done(function (names) { console.log(names); }); }); });    
   

现在的问题是，我需要将其与twitter引导程序（ 在typeahead.js中的第一个示例）合并，以便每次使用php脚本计算所使用的json（以下代码中的状态），而不是记录到console 。该领域的内容。

 $(document).ready(function() { var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str)) { // the typeahead jQuery plugin expects suggestions to a // JavaScript object, refer to typeahead docs for more info matches.push({ value: str }); } }); cb(matches); }; }; var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ]; $('#the-basics .typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', displayKey: 'value', source: substringMatcher(states) }); }); 

我一直试图抓住这个价值，但没有任何变化：

 jQuery(function($) { $('#name').keyup(function() { var input = $('#name').val(); names = $.getJSON('get_names.php', {input: input}); }); }); 

那么：每次keyup事件发生时，如何通过使用目前写入的输入调用php脚本来更新JSON？

Answer 1

编辑，更新

尝试

  var substringMatcher = function () { return function findmatches(q, cb) { var matches, substrRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array // do ajax stuff // update remote `source` here $.post("/echo/json/" // do stuff with `q` : `input` , {json:JSON.stringify([states, {input:q}])}) .then(function(json) { var names = json[1]; console.log(names); $.each(json[0], function (i, str) { if (substrRegex.test(str)) { // the typeahead jQuery plugin expects suggestions to a // JavaScript object, refer to typeahead docs for more info matches.push({ value: str }); } }); cb(matches); } // `error` handler , function(jqxhr, textStatus, errorThrown) { console.log(textStatus, errorThrown) }); // end of `then` }; }; var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas' , 'California','Colorado', 'Connecticut', 'Delaware' , 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois' , 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana' , 'Maine', 'Maryland', 'Massachusetts', 'Michigan' , 'Minnesota', 'Mississippi', 'Missouri', 'Montana' , 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey' , 'New Mexico', 'New York', 'North Carolina', 'North Dakota' , 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island' , 'South Carolina', 'South Dakota', 'Tennessee', 'Texas' , 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia' , 'Wisconsin', 'Wyoming']; $('#the-basics .typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'categories', displayKey: 'value', source: substringMatcher() }); 

jsfiddle http://jsfiddle.net/guest271314/96d5mzr8/16/

Answer 2

我最终做的是使用Bloodhound ，特别是replace以创建一个合适的查询：

 var states = new Bloodhound({ ... remote: { url: 'suggest.php?input=', replace: function (url, query) { suggestion.input = query; return url + suggestion.input; }, ... } }); states.initialize(); 

总之，完整代码如下所示：

 $(function(){ var suggestion = { input: '', normalized: '' }; var states = new Bloodhound({ datumTokenizer: function (d){ }, queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: 'get_names.php?input=', replace: function (url, query) { suggestion.input = query; return url + suggestion.input; }, filter: function (data) { return $.map(data, function(company) { return { value: company }; }); } } }); states.initialize(); $('#the-basics .typeahead').typeahead({ minLength: 1, highlight: true },{ displayKey: 'value', source: states.ttAdapter() }); });