如何触发jquery自动完成点击输入与现有值和默认结果为空输入

Question

我有以下自动完成脚本，它通过在搜索输入中输入至少1个字符来工作。

<!-- Autocomplete search -->
$('#autocomplete_game_search').click(function () {
$( "#autocomplete_game_search" ).autocomplete({
source: function( request, response ) {
// Fetch data
$.ajax({
url:"{{route('autocomplete-game-search')}}",
type: 'post',
dataType: "json",
data: {
search: request.term
},
success: function( data ) {
response( data );
}
});
},
// minLength: 1,
select: function (event, ui) {
return false;
}
}).data('ui-autocomplete')._renderItem = function(ul, item){
return $("<li class='ui-autocomplete-row'></li>")
.data("item.autocomplete", item)
.append(item.label)
.appendTo(ul);
};
}

我想通过点击空输入并删除所有搜索文本时显示默认搜索结果来改进此搜索。

还需要通过单击搜索输入来显示搜索输入中现有文本的搜索结果。现在，如果我搜索一个文本，点击输入框外，再点击输入框内，之前的搜索结果不会再显示，我必须先输入更多的文本或删除文本。

我能够捕捉到"click事件与现有的文本"以及"在空输入上单击事件";使用以下代码:

<!-- Autocomplete search -->
$('#autocomplete_game_search').click(function () {
var clicksearch = 0;
$( "#autocomplete_game_search" ).autocomplete({
source: function( request, response ) {
clicksearch = 1;
// Fetch data
$.ajax({
url:"{{route('autocomplete-game-search')}}",
type: 'post',
dataType: "json",
data: {
search: request.term
},
success: function( data ) {
response( data );
}
});
},
// minLength: 1,
select: function (event, ui) {
return false;
}
}).data('ui-autocomplete')._renderItem = function(ul, item){
return $("<li class='ui-autocomplete-row'></li>")
.data("item.autocomplete", item)
.append(item.label)
.appendTo(ul);
};
// Ajax search on click or full delete
if(clicksearch === 0){
// Check if search text available
var term = $("#autocomplete_game_search").val();
// Ajax search on click previous search text
if(term !== ''){
$.ajax({
url:"{{route('autocomplete-game-search')}}",
type: 'post',
dataType: "json",
data: {
search: term
},
success: function( data ) {
alert('click on text');
}
});
}
else{
// Ajax search on empty search text
$.ajax({
url:"{{route('autocomplete-game-search')}}",
type: 'post',
dataType: "json",
data: {
search: ''
},
success: function( data ) {
alert('empty text')
}
});
}
}
}

我的问题现在，我不知道如何触发自动完成，我已经写了警报。我已经尝试了很多方法，但我找不到正确的语法调用自动完成与"data"从我的ajax调用。

Answer 1

您可以这样使用bind事件.bind('focus', function(){ $(this).autocomplete("search"); } );

试试代码。

$('#autocomplete_game_search').click(function () {
var clicksearch = 0;
$( "#autocomplete_game_search" ).autocomplete({
source: function( request, response ) {
clicksearch = 1;
// Fetch data
$.ajax({
url:"{{route('autocomplete-game-search')}}",
type: 'post',
dataType: "json",
data: {
search: request.term
},
success: function( data ) {
response( data );
}
});
},
// minLength: 1,
select: function (event, ui) {
return false;
}
}).bind('focus', function(){ 
$(this).autocomplete("search"); 
}).data('ui-autocomplete')._renderItem = function(ul, item){
return $("<li class='ui-autocomplete-row'></li>")
.data("item.autocomplete", item)
.append(item.label)
.appendTo(ul);
};
// Ajax search on click or full delete
if(clicksearch === 0){
// Check if search text available
var term = $("#autocomplete_game_search").val();
// Ajax search on click previous search text
if(term !== ''){
$.ajax({
url:"{{route('autocomplete-game-search')}}",
type: 'post',
dataType: "json",
data: {
search: term
},
success: function( data ) {
alert('click on text');
}
});
}
else{
// Ajax search on empty search text
$.ajax({
url:"{{route('autocomplete-game-search')}}",
type: 'post',
dataType: "json",
data: {
search: ''
},
success: function( data ) {
alert('empty text')
}
});
}
}
}