jQuery tự động hoàn thành với nhiều giá trị ajax'd

Question

đang theo tài liệu từ trang web giao diện người dùng và xem một số hướng dẫn và có loại mã hoạt động, ajax trong danh sách cụm từ tôi muốn và bạn có thể chọn một và nó đặt giá trị và sau đó ",". Tuy nhiên, sau đó nó không nhắc lại cho một giá trị thứ hai.

Ngoài ra, khi tôi nhập một phần và nói 10 mục bật lên, tabbing chỉ cần đi đến trường biểu mẫu tiếp theo, không chắc chắn những gì sai với .bind của tôi, có lẽ là một thiết lập? Nếu bất cứ ai không quan tâm đến một cái nhìn, nó sẽ được nhiều đánh giá cao!

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 
      }); 

Answer 1

Tuy nhiên, sau đó không nhắc lại giá trị thứ hai.

Đảm bảo bạn nhập nhiều hơn 2 ký tự. Các hàm được chuyển vào search đang ngăn một tìm kiếm với ít hơn hai nhân vật từ gây ra một tìm kiếm:

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

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

---

Ngoài ra, khi tôi nhập một phần và nói 10 mục bật lên, tabbing chỉ đi vào trường biểu mẫu tiếp theo, không chắc chắn có gì sai với .bind của tôi, có lẽ là một cài đặt?

Các bind lúc đầu đang nỗ lực để ngăn chặn người dùng từ tabbing từ lĩnh vực khi một ứng cử viên autocomplete được đánh dấu. Với một giá trị tự động hoàn thành, điều này thường không phải là vấn đề bởi vì đầu tiên mục menu được chọn, được đặt trong input và sau đó tiêu điểm bị mất.

Điều này thay đổi khi bạn muốn nhiều giá trị trong input. Chúng tôi muốn dừng hành động mặc định đó là keydown để thay đổi tiêu điểm thành trường nhập tiếp theo.

autocomplete có tùy chọn autoFocus sẽ hữu ích ở đây. Nó sẽ đảm bảo rằng một ứng cử viên là luôn luôn được chọn khi người dùng truy cập tab sau khi nhập.

Tôi không thể sao chép chính xác tình huống của bạn, nhưng tôi đã tạo bản trình diễn không hiển thị một trong các vấn đề mà bạn đang gặp phải (tất cả những gì tôi đã thực hiện là thay đổi nguồn và thêm autoFocus tùy chọn): http://jsfiddle.net/zTVKC/