jQuery Combobox/chọn tự động hoàn tất?

Question

Trình cắm thêm jQuery có tồn tại để thay thế hộp chọn/combo không?

Tôi đã thử SexyCombo và nó gần với những gì tôi muốn, nhưng nó không hoàn thành nếu bạn đang viết từ giữa, chỉ từ đầu.

Tôi có 2 cấp độ danh mục (20 danh mục cấp cao nhất và với các danh mục phụ trong tổng số 120 danh mục), vì vậy khi người dùng gửi bài, anh ta phải tìm danh mục mong muốn càng sớm càng tốt.

Vì vậy, ... 2 cấp + tự động điền văn bản ngay cả khi bạn viết chữ cái giữa.

Hoặc bất kỳ giải pháp nào khác?

Answer 1

jQuery 1.8.1 có ví dụ về điều này trong tự động hoàn tất. Nó rất dễ thực hiện.

Answer 2

Hãy xem ví dụ sau về jQueryUI Autocomplete, vì nó đang giữ một lựa chọn xung quanh và tôi nghĩ đó là những gì bạn đang tìm kiếm. Hi vọng điêu nay co ich.

http://jqueryui.com/demos/autocomplete/#combobox

Answer 3

Tôi biết điều này đã được nói trước đó, nhưng jQuery Autocomplete sẽ làm chính xác những gì bạn cần. Bạn nên kiểm tra các tài liệu như autocomplete là rất tùy biến. Nếu bạn đã quen thuộc với javascript thì bạn sẽ có thể làm việc này. Nếu không tôi có thể cung cấp cho bạn một vài gợi ý, như tôi đã làm điều này một lần trước đây, nhưng hãy cẩn thận tôi cũng không thạo trong javascript bản thân mình, vì vậy chịu với tôi về điều này.

Tôi nghĩ rằng điều đầu tiên bạn nên làm là chỉ nhận được một trường văn bản tự động điền đơn giản đang hoạt động trên trang của bạn và sau đó bạn có thể tùy chỉnh nó từ đó.

Tiện ích tự động điền chấp nhận dữ liệu JSON như tùy chọn 'nguồn:'. Vì vậy, bạn nên thiết lập ứng dụng của mình để tạo ra 20 danh mục cấp cao nhất và các danh mục phụ ở định dạng JSON.

Điều tiếp theo cần biết là khi người dùng nhập vào trường văn bản của bạn, tiện ích tự động điền sẽ gửi giá trị đã nhập vào thông số được gọi là "thuật ngữ".

Vì vậy, giả sử đầu tiên bạn thiết lập trang web của bạn để cung cấp các dữ liệu JSON từ một URL như thế này:

/categories.json 

Sau đó nguồn autocomplete của bạn: tùy chọn sẽ là 'nguồn: /categories.json'.

Khi một người dùng nhập vào textfield, chẳng hạn như 'đầu Cata ...' widget autocomplete sẽ bắt đầu gửi các giá trị trong tham số 'hạn' như thế này:

/categories.json?term=first-cata 

chí này trả lại dữ liệu JSON về tiện ích được lọc theo bất kỳ thứ gì khớp với 'first-cata' và điều này được hiển thị dưới dạng đề xuất tự động điền.

Tôi không chắc chắn những gì bạn đang lập trình, nhưng bạn có thể chỉ định cách tham số 'thuật ngữ' tìm thấy kết quả phù hợp. Vì vậy, bạn có thể tùy chỉnh điều này, để cụm từ tìm thấy một kết hợp ở giữa một từ nếu bạn muốn. Ví dụ: nếu người dùng nhập 'hoặc', mã của bạn có thể khớp với 'sp hoặc ts'.

Cuối cùng, bạn đã nhận xét rằng bạn muốn có thể chọn tên danh mục nhưng có tiện ích tự động hoàn tất gửi ID danh mục không phải tên.

Điều này có thể dễ dàng thực hiện với một trường ẩn. Đây là những gì được hiển thị trong tài liệu tự động hoàn thành jQuery.

Khi người dùng chọn danh mục, JavaScript của bạn sẽ cập nhật trường ẩn với ID.

Tôi biết câu trả lời này không phải là rất chi tiết, nhưng đó là chủ yếu là bởi vì tôi không chắc chắn những gì bạn đang lập trình, nhưng ở trên nên chỉ cho bạn đi đúng hướng. Điều cần biết là bạn có thể làm thực tế bất kỳ tùy biến nào bạn muốn với tiện ích này, nếu bạn sẵn sàng dành thời gian để tìm hiểu nó.

Đây là những nét rộng, nhưng bạn có thể look here đối với một số ghi chú tôi đã thực hiện khi tôi triển khai một cái gì đó tương tự như những gì bạn muốn trong ứng dụng Rails.

Hy vọng điều này sẽ hữu ích.

Answer 4

[sửa] Đáng yêu chosen jQuery plugin đã được tôi chú ý, trông giống như một lựa chọn tuyệt vời cho tôi.

Hoặc nếu bạn chỉ muốn sử dụng tự động hoàn thành jQuery, tôi đã mở rộng combobox example để hỗ trợ mặc định và loại bỏ các chú giải công cụ để cung cấp cho những gì tôi nghĩ là hành vi được mong đợi nhiều hơn. Try it out.

(function ($) { 
    $.widget("ui.combobox", { 
     _create: function() { 
      var input, 
       that = this, 
       wasOpen = false, 
       select = this.element.hide(), 
       selected = select.children(":selected"), 
       defaultValue = selected.text() || "", 
       wrapper = this.wrapper = $("<span>") 
       .addClass("ui-combobox") 
       .insertAfter(select); 

      function removeIfInvalid(element) { 
       var value = $(element).val(), 
        matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"), 
        valid = false; 
       select.children("option").each(function() { 
        if ($(this).text().match(matcher)) { 
         this.selected = valid = true; 
         return false; 
        } 
       }); 

       if (!valid) { 
        // remove invalid value, as it didn't match anything 
        $(element).val(defaultValue); 
        select.val(defaultValue); 
        input.data("ui-autocomplete").term = ""; 
       } 
      } 

      input = $("<input>") 
       .appendTo(wrapper) 
       .val(defaultValue) 
       .attr("title", "") 
       .addClass("ui-state-default ui-combobox-input") 
       .width(select.width()) 
       .autocomplete({ 
        delay: 0, 
        minLength: 0, 
        autoFocus: true, 
        source: function (request, response) { 
         var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
         response(select.children("option").map(function() { 
          var text = $(this).text(); 
          if (this.value && (!request.term || matcher.test(text))) 
           return { 
            label: text.replace(
            new RegExp(
             "(?![^&;]+;)(?!<[^<>]*)(" + 
             $.ui.autocomplete.escapeRegex(request.term) + 
             ")(?![^<>]*>)(?![^&;]+;)", "gi" 
            ), "<strong>$1</strong>"), 
            value: text, 
            option: this 
           }; 
         })); 
        }, 
        select: function (event, ui) { 
         ui.item.option.selected = true; 
         that._trigger("selected", event, { 
          item: ui.item.option 
         }); 
        }, 
        change: function (event, ui) { 
         if (!ui.item) { 
          removeIfInvalid(this); 
         } 
        } 
       }) 
       .addClass("ui-widget ui-widget-content ui-corner-left"); 

      input.data("ui-autocomplete")._renderItem = function (ul, item) { 
       return $("<li>") 
        .append("<a>" + item.label + "</a>") 
        .appendTo(ul); 
      }; 

      $("<a>") 
       .attr("tabIndex", -1) 
       .appendTo(wrapper) 
       .button({ 
        icons: { 
         primary: "ui-icon-triangle-1-s" 
        }, 
        text: false 
       }) 
       .removeClass("ui-corner-all") 
       .addClass("ui-corner-right ui-combobox-toggle") 
       .mousedown(function() { 
        wasOpen = input.autocomplete("widget").is(":visible"); 
       }) 
       .click(function() { 
        input.focus(); 

        // close if already visible 
        if (wasOpen) { 
         return; 
        } 

        // pass empty string as value to search for, displaying all results 
        input.autocomplete("search", ""); 
       }); 
     }, 

     _destroy: function() { 
      this.wrapper.remove(); 
      this.element.show(); 
     } 
    }); 
})(jQuery); 

Answer 5

Điều này phù hợp với tôi và tôi làm nhiều hơn, viết ít hơn với ví dụ của jQuery đã sửa đổi.

Tôi đã xác định đối tượng được chọn trên trang của mình, giống như ví dụ jQuery. Tôi lấy văn bản và đẩy nó vào một mảng. Sau đó, tôi sử dụng mảng như là nguồn của tôi để tự động điền đầu vào của mình. tadaa.

$(function() { 
    var mySource = []; 
    $("#mySelect").children("option").map(function() { 
     mySource.push($(this).text()); 
    }); 

    $("#myInput").autocomplete({ 
     source: mySource, 
     minLength: 3 
    }); 
}