【问题标题】:Use ajax call in autocomplete with tag in Textextjs在 Textextjs 中使用带有标签的自动完成中的 ajax 调用
【发布时间】:2015-07-16 14:30:47
【问题描述】:

我正在使用 Textextjs autocomplete with tags
在上面的示例中,list 是一个简单的 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

有人可以帮我吗?

【问题讨论】:

    标签: javascript jquery ajax autocomplete jquery-textext


    【解决方案1】:

    异步就是答案。 var suggestionss = getSuggestions(search_text, urll); 之后的代码不会等待 getSuggestions 方法完成。所以这些行应该进入 ajax 的 .done() 或 .success() 方法

    $('#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
    
      });
    }
    

    【讨论】:

    • 谢谢,我的疑问被清除了。但是在 done() 中添加下面的代码是行不通的。 textext = $(e.target).textext()[0], query = (data ? data.query : '') || ''; $(this).trigger('setSuggestions', { result : textext.itemManager().filter(list, query) });
    • 这不起作用,因为 $(this) 没有按预期引用。请查看我的更新答案
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2010-10-24
    • 1970-01-01
    • 1970-01-01
    • 2012-03-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多