Реализация автозаполнения jQuery - PullRequest
4 голосов
/ 05 июля 2011

Итак, я придумал этот скрипт, который ajax вызывает предложения Google, а JSONP возвращает результаты поиска.Мне удалось отсортировать результаты, но вместо этого я хотел бы реализовать автозаполнение jquery.Я попробовал любой возможный способ, о котором мог думать, но не получил никаких результатов.

Вот рабочая скрипка: http://jsfiddle.net/YBf5J/, а вот сценарий:

$(document).ready(function() {      
    $('#q').keyup(retrieve);
    $('#q').focus();
    $('#results').show('slow');



    $("#q").autocomplete(parse, {
    Height:100,
    width:620,
    noCache: false,
    selectFirst: false
    });
});    


function retrieve() {
    $.ajax({
        type: "GET",
        url: 'http://suggestqueries.google.com/complete/search?qu=' + encodeURIComponent($('#q').val()),
        dataType: "jsonp",
        jsonpCallback: 'parse'
    });    
}



var parse = function(data) {
    var results = "";
    for (var i = 0; i < data[1].length; i++) {
        results += '<li>' + '<a href="#">' + data[1][i][0] + '</a>' + '</li>';
    }

    $('#results').html('' + results + '');
    $('#results > li a').click(function(event) {
        event.preventDefault();
        $('#q').val($(this).html()).closest('form').submit();
    });

}

А вот простое тело:

<body><input type="text" id="q"><div id="results"></div></body>

Любая помощь действительно приветствуется.Большое спасибо, Rallyboy.

1 Ответ

2 голосов
/ 05 июля 2011

Вот пример использования Jquery-UI Auto complete.Взято из вашего кода, все, что я делал, это обновлял источник автозаполнения каждый раз, когда данные изменялись с использованием этого кода.

var parse = function(data) {
var results = [];
for (var i = 0; i < data[1].length; i++) {
     results.push(data[1][i][0]);
}
$('#q').autocomplete({
    source: results
});

См. Скрипту

http://jsfiddle.net/WUcpC/1/

Этоиспользует только базовый CSS, но это можно изменить, указав на нужную вам тему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...