我正在尝试实现一种预输入,其来源是一个API,该API希望使用GET请求,该请求具有数据主体,而不是url编码数据。我在“准备”对象中尝试了一些其他操作,但是无法将其用于url编码参数。是否可以使用typeahead或一般的jquery使其不执行此操作?我有一种感觉jquery可能只是不允许您这样做,因为这被认为是“不好的做法”,但是更改API并不是真正的选择!这是我的代码:
$(document).ready(function(){ var people = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: 'apiUrl', prepare: function (query, settings) { settings.type = "GET"; settings.contentType = "application/json"; settings.DataType = "json"; settings.processData = false; settings.data = JSON.stringify({"search":"people","query":query}); return settings; } } }); $('.typeahead').typeahead(null, { source: people }); })
我正在使用jquery 1.11.3&typeahead.js 0.11.1。
谢谢!
尝试使用typeahead.js substringMatcher函数.on(),,input事件的最小修改版本
substringMatcher
.on()
input
var substringMatcher = function(strs, q, cb) { return (function(q, cb, name) { 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 $.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(name(str)); } }); cb(matches); }(q, cb, function(res) { return res })); }; $("#typeahead").on("input", function(e) { $.ajax({ url: "https://gist.githubusercontent.com/guest271314/" + "ffac94353ab16f42160e/raw/" + "aaee70a3e351f6c7bc00178eabb5970a02df87e9/states.json", processData:false, data: JSON.stringify({ "search": "people", "query": e.target.value }) }) .then(function(json) { if (e.target.value.length) { substringMatcher(JSON.parse(json), e.target.value, function(results) { $("#results ul").empty(); $.map(results, function(value, index) { $("#results ul") .append($("<li />", { "class": "results-" + index, "html": value })) }) }) } else { $("#results ul").empty(); } }, function err(jqxhr, textStatus, errorThrown) { console.log(textStatus, errorThrown) }) }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <input type="text" id="typeahead" placeholder="search" /> <br /> <div id="results"> <ul> </ul> </div>