Как отправить данные в теле запроса при использовании Typeahead & Bloodhound?

Я пытаюсь реализовать typeahead, источником которого является 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.

Спасибо!


get jquery ajax typeahead.js bloodhound
person datesss    schedule 16.11.2015    source источник
comment
D в settings.DataType должно быть в нижнем регистре d settings.dataType = "json"; ?   -  person guest271314    schedule 16.11.2015
comment
Спасибо за предложение! Я пробовал использовать нижний регистр dataType, но это не повлияло на поведение.   -  person datesss    schedule 17.11.2015
comment
Попробуйте использовать функцию typeahead.js substringMatcher twitter.github.io/ typeahead.js/examples/#file-the-basics-js, см. сообщение   -  person guest271314    schedule 17.11.2015

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте использовать минимально модифицированную версию функции 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>

person guest271314    schedule 17.11.2015