Как я могу использовать плагин jQuery Autocomplete для связанных полей ввода?

Question

Я использую плагин jQuery Autocomplete . У меня есть два поля ввода в форме, inputfield1 и inputfield2.

Я прикрепил автозаполнение к первому полю. Когда это поле теряет фокус, я хочу проверить, было ли введено значение, и если это так, затем выполнить AJAX-вызов, чтобы получить несколько строк, разделенных "\ n", и использовать их для автоматического заполнения второго поля.

Ниже приведен код, который я использую для этого:

/*Receive data from server for autocomplete*/
$("#inputfield1").autocomplete("<url1>"); 

$("#inputfield1").blur(function(){

    // Attach autocomplete if inputfield1 field is not empty
    if($("#inputfield1").val() != ""){
        var url = "<url2>?q="+$("#inputfield1").val();
        $.get(url,function(data){
            result=data.split("\n");
            $("#inputfield2").autocomplete(result);

        });
    }
});

Но происходит странная вещь: я могу успешно прикрепить автозаполнение к первому полю, но я должен дважды сфокусироваться на втором поле, чтобы использовать автозаполнение на нем. Есть ли способ решить эту проблему?

Answer 1

Я нашел этот код в текущей версии плагина автозаполнения:

.click(function(event) {
    $(target(event)).addClass(CLASSES.ACTIVE);
    select();
    // TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
    input.focus();
    return false;

Кажется, после щелчка снова фокусируется на себе. Это может вас испортить.

Вместо обработки события blur (), возможно, вам повезет больше, если вы обработаете событие result () плагина автозаполнения.

/*Receive data from server for autocomplete*/
$("#inputfield1").autocomplete("<url1>"); 

$("#inputfield1").result(function(event, data, formatted){

    // Attach autocomplete if inputfield1 field is not empty
    if(data){
        var url = "<url2>?q="+data;
        $.get(url,function(data1){
                result=data1.split("\n");
                $("#inputfield2").autocomplete(result);

        });
    }
});

Answer 2

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

Вот небольшая демонстрация, показывающая, как эта конструкция работает с последней версией автозаполнения .

Answer 3

Попробуйте этот упрощенный тест. Если это работает, проверьте, действительно ли ваш result содержит то, что вы думаете (предупредите об этом или запишите это на консоль). После разделения могут быть другие символы (а именно пробелы (начальные пробелы, \t или \r)), попробуйте обрезать каждое значение массива результата.

var data1 = ["a123", "b123", "c123", "d123", "e123", "f123", "g123", "h123", "i123", "j123",   "k123", "l123", "m123", "n123", "o123", "p123", "q123", "r123", "s123", "t123", "u123", "v123", "w123", "x123", "y123", "z123"];
var data2 = 'a123\nb123\nc123\nd123\ne123\nf123\ng123\nh123\ni123\nj123\nk123\nl123\nm123\nn123\no123\np123\nq123\nr123\ns123\nt123\nu123\nv123\nw123\nx123\ny123\nz123';
$("#inputfield1").autocomplete(data1);

$("#inputfield1").blur(function(){
    if($("#inputfield1").val() != ""){
        var result=data2.split("\n");
        $("#inputfield2").autocomplete(result);
    }
});

Answer 4

Вы говорите, что вам нужно выбрать # inputfield2 дважды, чтобы событие автозаполнения связывалось с ним, верно? Я просто думаю ... возможно ли, что вы используете клавишу табуляции на клавиатуре, чтобы выбрать # inputfield2, и когда это не работает, вы выбираете # inputfield2 с помощью мыши? Если так, разве не возможно, что событие размытия # inputfield1 не сработает, пока вы не «отмените» его мышкой (возможно, какой-то ошибкой)?

Я не пробовал это, это просто мысль.