使用Typeahead＆Bloodhound时如何在请求正文中发送数据？

Question

我正在尝试实现一种预输入，其来源是一个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。

谢谢！

Answer 1

尝试使用typeahead.js
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>