Использовать вызов ajax при автозаполнении тегом в Textextjs
Я использую автозаполнение Textextjs с тегами
В приведенном выше списке приведен простой массив json.
И я хочу получить его значение из функции ajax.
В этом случае вызов ajax выполняется поздно. Таким образом, ожидаемый результат нарушен. Посмотрите на приведенный ниже код
$('#textarea')
.textext({
plugins : 'tags autocomplete'
})
.bind('getSuggestions', function(e, data)
{
console.log(1);
search_text = (data ? data.query : '') || '';
var urll = 'url_to_get_result';
// call ajax function
var suggestionss = getSuggestions(search_text, urll);
console.log(4);
$("#output1").val();
var list = suggestionss,
textext = $(e.target).textext()[0],
query = (data ? data.query : '') || '';
$(this).trigger(
'setSuggestions',
{ result : textext.itemManager().filter(list, query) }
);
});
function getSuggestions(search_text, urll)
{
console.log(2);
$.ajax({
'url': urll,
'data': {'wt':'json'},
type: 'GET',
'success': function(data) {
jsonObj = [];
var count = data.count.length;
for(i=0; i<count; i++)
{
var name = data.name.docs[i].term_suggest_ngram;
autosuggestitem = {}
autosuggestitem = '"'+name+'"';
jsonObj.push(autosuggestitem);
}
var result = JSON.stringify(jsonObj);
availableSearch = JSON.parse(result);
console.log(3);
$("#output1").val(availableSearch);
},
'dataType' : 'jsonp',
'jsonp': 'json.wrf'
});
var return_val = $("#output1").val();
return return_val;
}
Смотрите консольные операторы, они выполняются в последовательности
1 - 2 - 4 - 3
Ожидаемое поведение должно быть
1 - 2 - 3 - 4
Кто-нибудь может мне помочь?
1 ответ
Решение
Асинхронный ответ. Код после var suggestionss = getSuggestions(search_text, urll);
НЕ ожидает завершения метода getSuggestions. Таким образом, эти строки должны идти в метод.done() или.success() ajax
$('#textarea')
.textext({
plugins : 'tags autocomplete'
})
.bind('getSuggestions', function(e, data)
{
console.log(1);
......
var self = $(this); // <--- store a reference of this
getSuggestions(search_text, urll).done(function(){ // <--- .done() method of the returned ajax is invoked
console.log(3);
console.log(4);
.....
textext = $(e.target).textext()[0],
query = (data ? data.query : '') || '';
self.trigger( // <---- stored reference
'setSuggestions',
{ result : textext.itemManager().filter(list, query) }
);
});
});
function getSuggestions(search_text, urll) {
console.log(2);
return ajax({ // <---- notice that ajax is returned here
});
}