Flask AJAX Autocomplete

Я пытаюсь создать виджет автозаполнения jQuery UI с фреймворком.Flask AJAX Autocomplete

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)

Я думаю, что я получил это право, но это Безразлично» похоже, работает. Как только я перезагружаю страницу, функция вызывается (даже без ввода и с minLength = 2), ищет университеты, но ничего не отображает (даже когда он нашел университеты).

После первого поиска (сразу после страницы), виджет прекращает отправку запросов на сервер, если при вводе более двух букв в поле.

Может ли кто-нибудь помочь мне здесь? Я просто пытаюсь получить самое основное использование виджета автозаполнения с помощью AJAX с помощью Flask.

источник

2013-03-09 arnoutaertgeerts

Вы должны обернуть $.getJSON() в функции, будут выполнены с помощью плагина всякий раз, когда значение текстового поля изменяется

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

Теперь в зависимости от того, что вы возвращаетесь с сервера, выше может быть достаточно , Однако, если вам нужно отфильтровать или сопоставить данные для того, чтобы автозаполнения, чтобы отобразить его вам нужно будет использовать функцию $.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

Единственная проблема, с которой я столкнулся сейчас, заключается в том, что серверная сторона больше не распознает мою переменную поиска. Я получаю ошибку, которую выполняет поиск = Нет? – arnoutaertgeerts

, если вы используете Chrome, откройте инструменты разработчика и перейдите на вкладку сети. Когда вы вводите что-то в текстовое поле, вы должны увидеть новые запросы. Проверьте URL-адрес запроса, чтобы убедиться, что он правильный – Dogoku

Flask AJAX Autocomplete

ответ

Смежные вопросы