Динамически загружаемые опции списка данных с AJAX в Firefox - PullRequest
Новая
       10

Динамически загружаемые опции списка данных с AJAX в Firefox

0 голосов
/ 26 октября 2018

По разным причинам я хочу избавиться от функции автозаполнения пользовательского интерфейса Jquery и заменить ее на списки данных HTML5 с полем динамически загружаемых опций.Я искал эту тему довольно много дней и нашел также разные ответы на stackoverflow, например Как обновить список данных HTML5 с помощью JavaScript? , который, я думаю, довольно близок к тому, что я ищу.

Мне нужен список данных для выбора тегов, которые будут записываться через запятую в поле ввода.Проблема в том, что список данных отображается правильно только для первого тега.Предложение для второго не отображается при наборе «букв».

Теперь к процессу:

Ввод: app

Ответ сервера: 

['apple','pinapple','snapper']

Показано предложение от datalist: 

apple
pinapple
snapper

Теперь я выбираю: яблоко, которое записывается в поле ввода, а затем:

Ввод:, на

СерверОтвет: 

['intest','instructor','insula']

Показано предложение от datalist: ничего, и в этом проблема

НО:

Если я сейчас нажму клавишу Backspace и удалю последний знак, во входныхполе теперь стоит: 

apple, i

Затем Firefox показывает в качестве параметров: 

apple, intest
apple, instructor
apple, insula

Я знаю, что есть сравнение со значением или значением поля innerHTML, поэтому я использую: 

<option value="apple, intest">apple, intest</option>

Теперь пример кода:

HTML 

<input list="autocompleteList" type="text" class="form-control" name="Tags" id="Tags">
<datalist id="autocompleteList"></datalist>

JS 

// Used for querying only the last word of input field
function extractLast( term ) { return split( term ).pop(); }

$( document ).on( "input","*[name=Tags]", function( e ) {

    var _this  = $(this);
    var input  = _this.val();
    var first_part;

    // If a first tag is already inserted, now extract it for later use
    if ( input.split(/,|,\s*| /).length > 1 ) {
        var temp   = input.split(/,|,\s*| /);
        first_part = temp.filter(function (el) { return el.trim() != ""; }).slice(0,-1).join(', ') + ', ';
        console.log("EXTRACTED FIRST PART " + first_part);
    } else {
        first_part = '';    
    }

    if ( extractLast(input).length >= 2 ) {
        $.ajax({
        dataType: "json",
          type : 'POST',
          async:true,
          url: 'example.com/suggester',
            data: {term: extractLast( input )},
          success: function (data) {
                $("#autocompleteList").empty();
                for (i=0; i<data.length; i++) {
                    $("#autocompleteList").append('<option value="' + first_part + data[i] + '">' +  first_part + data[i] + '</option>');
                }                               

                // Array of Tags
                console.log("DATA FROM SERVER: " + data);

                // For inspection
               console.log("CONTENT OF AUTOCOMPLETE LIST: " + $('#autocompleteList').html());
          }  
       });
    }
});

ЧтоЯ уже проверил:

  1. Изменение: от ввода до нажатия клавиши, нажатия клавиши, нажатия клавиши, изменения -> безуспешно
  2. Ручное инициирование событий: _this.focus () или другое--> нет ответа
  3. Использование JQuery show () для списка данных
  4. Вставить параметры в HTML-выбор.В этой ситуации список данных также не работает должным образом, но раскрывающееся меню, вызываемое выбором, работает нормально и быстро обновляется.

Итак, наконец:

Как мне добиться,что опции списка данных открываются при наборе букв без пробела?

Заранее спасибо!

1 Ответ

0 голосов
/ 22 февраля 2019

Я наткнулся на этот пост, который точно описывает проблему, с которой я столкнулся, и был удивлен, что не нашел ответов. Атрибут автозаполнения должен быть установлен. В вашем случае 

<input autoComplete="off" list="autocompleteList" type="text" class="form-control" name="Tags" id="Tags">

Обратите внимание на заглавную букву C в атрибуте.

Согласно этой записи, проблема была в React, который использует атрибуты в верблюжьей оболочке. Я не использую React, но, тем не менее, он мне помог.

...