瓶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自動填充小部件的最基本用法。

來源

2013-03-09 arnoutaertgeerts

你只要文本框的值改變

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看到更多的信息

來源

2013-03-09 12:44:19 Dogoku

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

我現在具有唯一的問題是服務器端不承認我的搜索變量了。我得到搜索=無的錯誤？ – arnoutaertgeerts 2013-03-09 16:19:24

，如果你使用的是Chrome，打開開發人員工具並轉到網絡選項卡。當您在文本框中輸入內容時，您應該會看到新的請求。請檢查請求網址以查看它是否正確 – Dogoku 2013-03-09 16:22:43

瓶AJAX自動完成

回答

相關問題