Автозаполнение jQuery, Как принять найденные и найденные условия - PullRequest
Новая
       4

Автозаполнение jQuery, Как принять найденные и найденные условия

0 голосов
/ 25 сентября 2010

Я ссылаюсь на код плагина автозаполнения jQuery, который можно увидеть в этом учебном пособии: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

Проблема этого учебного пособия заключается в том, что он поддерживает только элементы, найденные на сервере.Я хотел бы разрешить пользователю использовать элементы, найденные на сервере (как это работает сегодня), а также разрешить пользователю вводить новые значения, не нарушая плагин ... Пример, чтобы вы могли ввести адрес электронной почты пользователянажмите Enter, а затем продолжите использовать плагин, возможно, затем найдите другой элемент на сервере и снова нажмите клавишу возврата.

Идеи?Возможно ли это?

1 Ответ

2 голосов
/ 25 сентября 2010

Вы можете попробовать добавить то, что вводится, в список предложений. Таким образом, они могут по существу выбрать то, что они печатают, используя "req.term". Как это: 

//process response
$.each(data, function(i, val){                              
    suggestions.push(val.name);
});
//append what has been typed in so it's available for selection
suggestions.push(req.term);
//pass array to callback
add(suggestions);

Затем в функции select: вы можете вставить выборку в базу данных с помощью вызова ajax, если она еще не существует. 

//define select handler
select: function(e, ui) {

    //create formatted friend
    var friend = ui.item.value,
        span = $("<span>").text(friend),
        a = $("<a>").addClass("remove").attr({
            href: "javascript:",
            title: "Remove " + friend
        }).text("x").appendTo(span);

    //add friend to friend div
    span.insertBefore("#to");

    //insert selected email if doesn't already exists
},

Вот пример нажатия клавиши для вставки вашего отформатированного друга при вводе: 

$("#to").keypress(function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //Enter keycode
        e.preventDefault();

        //create formatted friend
        var friend = $(this).val(),
            span = $("<span>").text(friend),
            a = $("<a>").addClass("remove").attr({
                href: "javascript:",
                title: "Remove " + friend
            }).text("x").appendTo(span);

        //add friend to friend div
        span.insertBefore("#to");

        $(this).autocomplete('close');
    }
});
...