首页 文章

什么是jQuery UI Autocomplete在AppEngine上返回非本地结果的简单示例

提问于
浏览
1

我正在尝试实现一个jQuery自动完成搜索栏,以便在Google AppEngine(GAE)上托管 . 我看过帖子表明如果我想使用远程源,我必须自己过滤结果 . 如果我将列表中的列表作为数组存储,如果过滤正确,那么我也尝试将从GAE返回的大型服务器端JSON数组转换为本地客户端数组,以避免需要手动过滤 . 两种尝试都没有奏效 .

获取过滤的非本地结果的最简单方法(对于jQuery / .js初学者)是什么?

这是我尝试使用jQueryui文档中提供的正则表达式示例,以及在SO上发布的其他示例 . 如果我在搜索栏中输入“c”,我的下拉列表只会显示并返回字母c .

GAE .py代码:

class Search(webapp2.RequestHandler):
    def get(self):
        data = ["chickenpox", "chlamydia", "cholera" ]
        tags = json.dumps(data)
        self.response.out.write(tags)

模板代码:

注意: '/search' 指向返回json数据的GAE服务器处理程序 .

<script>
var availableTags = '/search';

$(function() {                          
$( "#autocomplete" ).autocomplete({
    source: function( request, response ) {
            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
            response( $.grep( availableTags, function( item ){
                return matcher.test( item );
            }) );
        },  
    minLength: 1,
     select: function( event, ui ) {
                $("#user_input").html('Selected: '+ ui.item.value);
                var entry = ui.item.value;
            }
        });
});
</script>

下面是我尝试将 availableTags 转换为本地数组,以便自动完成将过滤结果本身 . 这种黑客/解决方法是否可能?如果不是为什么不呢?

var availableTags = '/search';
var new_local_array = $.parseJSON(availableTags);

我应该尝试哪种方法?谢谢 .

1 回答

  • 5

    在您的代码中, availableTags 只包含一个字符串( "/search" ) . 您实际上没有发出AJAX请求来获取数据 .

    如果您不想在服务器上进行过滤,我建议您发出AJAX请求来检索信息,然后使用该数据配置自动完成小部件:

    $.getJSON('/search', function (data) {
        $("#autocomplete").autocomplete({
            source: data,
            minLength: 1,
            select: function (event, ui) { ... }
        });
    });
    

    基本上我们在这里做的是向服务器询问可能匹配的数组 . 当我们获得该数组时,我们用它初始化自动完成小部件 . 这将允许小部件为我们完成所有过滤 .

相关问题