Блог

У меня возникла серьезная проблема с попыткой использовать автозаполнение jquery, а javascript не является моим самым сильным навыком.

Я использую плагин jquery.auto-complete, найденный здесь:https://github.com/Pixabay/jQuery-autoComplete который является перезаписью devbridge.com версия.

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

у меня есть форма для ввода данных для очень большой базы данных. ничего особенного, но очень большая база данных с большим количеством полей и около 80% данных — это простые текстовые поля, которые имеют очень похожие или дублирующиеся значения, но все же достаточно разнообразные, так что ничто иное, как автозаполнение, не облегчит жизнь. это может занять очень много времени и утомительно, особенно когда база данных насчитывает более 1 млн записей.

итак, поскольку у меня есть около 40 полей, требующих поиска, это мой текущий код:

 $(window).on('load', function () {
    var xhr;
    $('[data-autocomplete]').autoComplete({
        source: function(term, response){
            try { xhr.abort(); } catch(e){}
            xhr = $.get( '/api.php', 
                        { field: $(this).attr('data-autocomplete'),
                          search: term,
                         }, function(data){ response(data); });
        }
    });

...
  

и это мое поле:

 <input type="text" name="data[title]" id="data[title]" data-autocomplete="title" /> 
  

но по какой-то причине я не могу получить значение атрибута «data-autocomplete» для передачи функции автозаполнения. он просто отображается как неопределенный, и это важно для поиска

что мне нужно, так это способ, которым я могу привязать автозаполнение при загрузке страницы к любому текстовому вводу с атрибутом «данные-автозаполнение» (пока все хорошо), а затем передать это значение в автозаполнение, создав таким образом URL:

api.php?field=[data-autocomplete]amp;search=[term]

звучит просто, но кажется чрезвычайно сложным. мой другой вариант — дублировать операторы автозаполнения более 40 раз, и это просто кажется смешным!

итак, может кто-нибудь, пожалуйста, дать мне какое-нибудь направление? Спасибо!

Перебирайте элементы в each цикле, чтобы вы могли изолировать экземпляры.

 $('[data-autocomplete]').each(function() {
  let xhr,
      $input = $(this),
      field = $input.attr('data-autocomplete');

  $input.autoComplete({
    source: function(term, response) {
      try {
        xhr.abort();
      } catch (e) {}
      xhr = $.get('/api.php', { field: field, search: term}, response);
    }
  });

});
  

Первое, что я замечаю, это то, что у вас ошибочная запятая после переменной «term» в вашем вызове get:

 xhr = $.get( '/api.php', 
  { 
    field: $(this).attr('data-autocomplete'),
    search: term, <-- code-breaking comma.
  }, function(data){ response(data); });
  

Также возможно, что ссылка вашего вызова get на this больше не относится к ожидаемому объекту.

Попробуйте что-то подобное вместо этого:

 $( window ).on( 'load', function () {

    let xhr, me = this;

    $( '[data-autocomplete]' ).autoComplete( {

        source: function( term, response ) {

            try { xhr.abort(); } catch( e ){}

            xhr = $.get(  '/api.php', 
                { 
                    field: $( me ).attr( 'data-autocomplete' ), 
                    search: term
                }, 
                function( data ){ response( data ); 
            } );
            
        }    

    } );

} );