jquery自动完成中的远程数据源

时间:2015-04-25 19:43:49

标签: jquery autocomplete

我必须在jquery自动完成列表中显示搜索到的文本。我有功能,它在列表中添加搜索文本,但我必须使用远程数据源。我有一个返回array的网址。

使用静态数组列表fiddle进行演示

我必须使用远程数据源添加相同的功能。如何在响应中添加搜索文本。

$(document).ready(function() {

   var tagsElem = $("#tags");

   tagsElem.autocomplete({
        source : "search.php",
        search : function( event, ui ){
            if(check(response,tagsElem.val()))
              response[response.length]=tagsElem.val()              
            tagsElem.autocomplete( "option", "source", response);
        },
        open: function( event, ui ) {
            if(check(response,tagsElem.val())){
            tagsElem.next().find('li:last a').append(' <span style="color:red;">new</span>');
            }
                   }
    });

    function check(arrayTag,value){
     for(i=0;i<len;i++){
        if( arrayTag[i]==value)
                return false
        }
        return true
    }

});

1 个答案:

答案 0 :(得分:0)

我可以看到你正在使用Jquery UI。

我假设您知道how to change to remote source,并返回一个简单的数组答案。

当Jquery UI工作时,它会将您的简单json数组更改为:

[{label:<array_value1>,value:<array_value1>},{label:<array_value2>,value:<array_value2>}]

要完成你想要的,你必须在响应事件中执行:

            response: function(index,obj){
                var v = tagsElem.val();
                var add = {};
                add['label'] = v;
                add['value'] = v;
                obj.content[obj.content.length] = add;
            }

&#39; obj.content&#39;是上面的json数组。

这会将搜索关键字添加到响应数组中。

请注意&#39; tagsElem&#39;在上面的例子中引用了JSFiddle中的tagsElem。

这是我工作的例子,不是在小提琴中而是在localhost上: JSFiddle