提问人：Dova Kin 提问时间：11/5/2023 最后编辑：isherwoodDova Kin 更新时间：11/7/2023 访问量：50
自动完成预输入搜索，使用 ajax 调用疑难解答
Autocomplete typeahead search, using ajax calls troubleshooting
问：
我正在尝试使用文本输入作为搜索框，使用引导预输入插件通过ajax调用检索搜索结果
<form class="form-inline ml-3" action="/phone-autocomplete/">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar typeahead" data-provide="typeahead" autocomplete="off"
id="phone-autocomplete" type="search" name="searchstring" placeholder="search phone" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
我的数据源返回一个文本/xml 响应，如下所示：
[ "9876124", "9812124","9875124",]
我的javascript，在包含所有必需的包后，如下：
$('#phone-autocomplete').typeahead({
source: function (query, process) {
return $.get('/phone-autocomplete/', { searchstring: query }, function (data) {
console.log(data);
return process(data);
});
},
'updater' : function(item) {
this.$element[0].value = item;
console.log(item);
this.$element[0].form.submit();
return item;
}
});
</script>
其目的是让搜索输入在用户每次键入字符时发送请求，并返回更新的项目列表
我遇到的问题是它仅适用于一位数字，然后由于某种原因停止显示
这是使用 bootstrap3-typeahead.min.js 包
谢谢
答：
0赞
user2314737
11/5/2023
#1
您的 Ajax 调用一定有问题，因为似乎在搜索框中键入的每个字符都在更新，请参阅演示：typeahead
//
$('#phone-autocomplete').typeahead({
source: function(query, process) {
data = ["9876124", "9812124", "9875124", ];
console.log(`Ajax call with query: ${query}`);
return process(data);
},
'updater': function(item) {
this.$element[0].value = item;
console.log(item);
this.$element[0].form.submit();
return item;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<form class="form-inline ml-3" action="/phone-autocomplete/">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar typeahead" data-provide="typeahead" autocomplete="off" id="phone-autocomplete" type="search" name="searchstring" placeholder="search phone" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>下面是一个演示，展示了如何从 Ajax 调用获取输出（注意：我将 Ajax 设置为 ）。asyncfalse
请参见：https://api.jquery.com/jQuery.get/
//
$.ajaxSetup({
async: false,
});
$('#phone-autocomplete').typeahead({
source: function(query, process) {
console.log(`Ajax call with query: ${query}`);
var data = [];
$.get("example.php", function(data) {
//alert("success");
})
.done(function() {
//alert("second success");
})
.fail(function() {
//alert("error");
})
.always(function() {
//alert("finished");
data = ["9876124", "9812124", "9875124", ];
console.log(`data = ${data}`);
});
return process(data);
},
'updater': function(item) {
this.$element[0].value = item;
console.log(item);
this.$element[0].form.submit();
return item;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<form class="form-inline ml-3" action="/phone-autocomplete/">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar typeahead" data-provide="typeahead" autocomplete="off" id="phone-autocomplete" type="search" name="searchstring" placeholder="search phone" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>你只需要删除这些线条
data = ["9876124", "9812124", "9875124", ];
console.log(`data = ${data}`);
并从回调函数中填充。
希望这有帮助！alwaysdatadone
评论
0赞
Dova Kin
11/6/2023
我将如何在完成的回调中填充数据？这很奇怪，因为当我手动访问我的数据提供程序 URL 时，它会返回您硬编码的相同数组。我将如何“捕获”get 请求并将其分配给 done 回调中的数据？
0赞
Dova Kin
11/6/2023
没关系，它是MIME类型，如果它没有设置为JSON，它就不起作用！无论如何，谢谢！
0赞
Dova Kin
11/6/2023
#2
我解决了， 显然，将远程响应的 MIME 类型设置为 application/json 至关重要，输出文本字符串或 HTML 不起作用并且静默失败
评论
0赞
user2314737
11/6/2023
也许添加一个回调，这样它就不会静默失败？fail()
评论
form.submit();