瓶AJAX自动完成

问题描述：

我试图与该瓶框架jQuery用户界面自动完成构件的工作。瓶AJAX自动完成

http://flask.pocoo.org/docs/patterns/jquery/

http://jqueryui.com/autocomplete/#remote

这是我的HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://w3.org/TR/html4/strict.dtd"> 
<head> 

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
    <script type=text/javascript> 
    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; 
    </script> 

    <style> 
    .ui-autocomplete-loading { 
    background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; 
    } 
    </style> 

<script type="text/javascript"> 
    $(function() { 
    $("#university").autocomplete({ 
     source: $.getJSON($SCRIPT_ROOT + "/_search_university", 
     {search: $('input[name="university"]').val()}), 
     minLength: 2, 
    }); 
    }); 
    </script> 

</head> 

<body> 

    <div class="ui-widget"> 
    <label for="university">University: </label> 
    <input id="university", name="university" /> 
    </div> 

</body>

这是我的瓶方法：

@app.route('/_search_university') 
def search_university(): 
    search = request.args.get('search') 
    results = session.query(University).filter(name.like('%' + search + '%')).all() 
    return jsonify(results)

我觉得我得到了正确的，但它不” t似乎工作。当我重新加载页面的函数被调用（甚至无需投入，并与的minLength = 2），将查找大学，但不显示任何内容（甚至当他发现大学）。

第一查找负载（页面后右）后，小部件停止发送请求到服务器，如果当我在字段中键入超过2个字母。

有人可以帮我吗？我只是试图通过使用Flask来获得AJAX自动填充小部件的最基本用法。

答

你只要文本框的值改变

source: function(request, response) { 
    $.getJSON($SCRIPT_ROOT + "/_search_university", { 
     search: request 
    }, response); 
}

现在取决于您是从服务器返回什么来包装将由插件得到执行的函数$.getJSON()，上面可能就足够了。不过，如果你需要过滤或为了将数据映射为自动完成，以显示它您需要使用$.map()函数将数据转换成由自动完成

source: function(request, response) { 
     $.getJSON($SCRIPT_ROOT + "/_search_university", { 
      search: request 
     }, function(data) { 
      response($.map(data.results, function(item) { 
       return { 
        label: item.name, 
        value: item.id 
       } 
      })); 
     }); 
}

接受的格式，如果你提供给我，用JSON您的服务器的回报，我可以更具体

检查http://api.jqueryui.com/autocomplete/#option-source看到更多的信息

哇感谢！完美的答案！ – arnoutaertgeerts 2013-03-09 15:03:59

我现在具有唯一的问题是服务器端不承认我的搜索变量了。我得到搜索=无的错误？ – arnoutaertgeerts 2013-03-09 16:19:24

，如果你使用的是Chrome，打开开发人员工具并转到网络选项卡。当您在文本框中输入内容时，您应该会看到新的请求。请检查请求网址以查看它是否正确 – Dogoku 2013-03-09 16:22:43

相关推荐