Автозаполнение jQuery с несколькими значениями ajax'd - PullRequest
Новая
       13

Автозаполнение jQuery с несколькими значениями ajax'd

5 голосов
/ 11 сентября 2011

следовал за документацией с сайта пользовательского интерфейса, просмотрел несколько учебных пособий и получил мой код вроде как, он есть в списке терминов, которые я хочу, ajax, и вы можете выбрать один из них, и он поместит значение и затем " " Однако впоследствии он не запрашивает второе значение.

Кроме того, когда я ввожу партиал и говорю, что всплывают 10 записей, вкладка просто переходит к следующему полю формы, не знаете, что не так с моим .bind, возможно, с настройкой? Если кто-то не возражает против взгляда, это будет высоко ценится! 

function split(val) {
            return val.split(/,\s*/);
        }

        function extractLast(term) {
            return split(term).pop();
        }

       jQuery('#tagSearch')
            .bind('keydown', function(event) {
                    if (event.keyCode === jQuery.ui.keyCode.TAB &&
                         jQuery(this).data('autocomplete').menu.active) {
                            event.preventDefault();
                    }
            })
           .autocomplete({
              autoFocus: true,
              source: function(request, add) {
                    console.log('source');
                    jQuery.getJSON('/get-tags-like.php?term_start=' + request.term, function(response) {
                        var possibleTerms = [];

                        jQuery.each(response, function(i, val) {
                            possibleTerms.push(val.name + ' ' + '(' + val.count + ')');
                        });

                        add(jQuery.map(possibleTerms, function(item) {
                            console.log(possibleTerms);
                            return item;
                        }));        
                    });
              },
              focus: function() {
                  console.log('focus');
                return false;
              },
              select: function(event, ui) {
                  console.log('select');
                  var terms = split(this.value);

                  terms.pop();

                  terms.push(ui.item.value);

                  terms.push('');

                  this.value = terms.join(',');

                  // At this point, example:
                  // Sony (5)
                var currentVal = this.value;

                  // Sony (5) - Gets inserted as "Sony"
                  currentVal = currentVal.replace(/\s\(.\)/, '');

                  this.value = currentVal;

                  return false;
              },
              minLength: 2
           });

1 Ответ

1 голос
/ 11 сентября 2011

Однако впоследствии он не запрашивает второе значение.

Убедитесь, что вы печатаете более 2 символов.Функция, переданная в search, предотвращает поиск, содержащий менее двух символов: 

search: function() {
      var term = extractLast(this.value);

      if (term.length < 2) {
          return false;
      }
},

Кроме того, когда я ввожу партиал и говорю, что всплывают 10 записей, табуляция просто переходит к следующему полю формы, не уверен, что не так с моим .bind, возможно, с настройкой?

bind в начале пытается запретить пользователю вкладку из поля , когда кандидат на автозаполнение выделен .При автозаполнении одного значения это обычно не является проблемой, поскольку сначала выбирается элемент меню, помещается в input, а затем фокус теряется.

Это изменяется, когда вам нужно несколько значений в input.Мы хотим остановить действие по умолчанию keydown, которое меняет фокус на следующее поле ввода.

autocomplete имеет параметр autoFocus, который будет полезен здесь.Это гарантирует, что кандидат будет всегда выбран, когда пользователь нажимает на вкладку после ввода.

Я не могу точно воспроизвести вашу ситуацию, но я создал демо, которое не 'не выявляет ни одной из проблем, с которыми вы сталкиваетесь (все, что я действительно сделал, это изменил источник и добавил опцию autoFocus): http://jsfiddle.net/zTVKC/

...