使用Typeahead和Bloodhound時如何在請求主體中發送數據？

我想實現一個typeahead，它的源代碼是一個API，它需要一個帶有數據體的GET請求，而不是url編碼的數據。我已經在「準備」對象中嘗試了一些不同的東西，但無法獲取到URL編碼參數。一般來說，是否可以用typeahead或jquery來讓它不這樣做？我有一種感覺，jquery可能只是不會讓你這樣做，因爲它被認爲是'壞習慣'，但改變API並不是真正的選擇！這裏是我的代碼：使用Typeahead和Bloodhound時如何在請求主體中發送數據？

$(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。

謝謝！

來源

2015-11-16 datesss

'D'在'settings.DataType'應該是小寫字母'D''設置。 dataType =「json」;'？ – guest271314

感謝您的建議！我試圖降低dataType，但它不影響行爲。 – datesss

嘗試使用typeahead.js'substringMatcher'函數https://twitter.github.io/typeahead.js/examples/#file-the-basics-js，請參閱文章 – guest271314

嘗試使用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>

來源

2015-11-17 19:42:39 guest271314

使用Typeahead和Bloodhound時如何在請求主體中發送數據？

回答

相關問題