Jquery: Danh sách bộ lọc thả xuống khi bạn nhập

Question

Tôi đã sử dụng một plugin nguyên mẫu để lọc nội dung của menu thả xuống khi bạn nhập. Vì vậy, ví dụ: nếu bạn nhập 'cat' vào hộp văn bản, chỉ các mục chứa chuỗi con 'con mèo' sẽ được để lại dưới dạng tùy chọn trong trình đơn thả xuống.

Có ai biết plugin jquery có thể thực hiện việc này không?

Answer 1

tôi đã viết a little script to do this một vài năm trước đây. Nó có thể được đóng gói như một trình cắm thêm jQuery khá dễ dàng, có thể. Bạn đang chào đón nó.

Tôi cũng làm điều này trong tiện ích Trang tổng quan PHP Function Reference Bảng điều khiển của mình nếu bạn muốn xem mã ở đó.

Answer 2

jQuery autocomplete plugin

EDIT: Tôi bước đầu được liên kết với plugin tự động hoàn thành sai.

Answer 3

Kiểm tra các plugin:

• SexyCombo
• QuickSelect
• DropList Filter

Answer 4

Hãy thử "Tùy chọn jquery lọc", dựa trên hộp thực lựa chọn và phù hợp vào giữa các văn bản tùy chọn: http://plugins.jquery.com/project/jquery_options_filter

cho diyism

Answer 5

Tôi chỉ tìm kiếm một cái gì đó tương tự, và tốt nhất cho những gì tôi cần có vẻ là JQuery UI MultiSelect. Nó biến các hộp chọn nhiều thành một chế độ xem danh sách kép trơn tru, với bộ lọc trực tiếp trên danh sách chính.

EDIT: Phát triển mới!

"Chosen là một plugin Javascript mà làm dài, chọn hộp trở nên cồng kềnh hơn nhiều người dùng thân thiện. Nó hiện đang có sẵn trong cả hai hương vị jQuery và Prototype."

Tôi đang sử dụng hoàn toàn Chosen trên tất cả các dự án được chọn sử dụng trong tương lai gần.

Answer 6

Select2 là một ngã ba khá gần đây được chọn và có nhiều tính năng hơn (ví dụ: AJAX + HTML tùy chỉnh cho từng mục).

Answer 7

Tôi vừa triển khai tính năng này nhanh chóng và bẩn. Nó sử dụng một số biến toàn cầu, bạn có thể muốn cải thiện việc triển khai để loại bỏ các biến này.

Ở đây '#xsca_member_filter' là bộ lọc làm đầu vào văn bản và '#members' là đầu vào được chọn.

$('documenet').ready(function(){ 
    init(); 
    $('#xsca_member_filter').keyup(function(){ 
     filter($(this)); 
    }); 
}); 

//save all available options with their values and the empty option. 
init = function(){ 
    options = new Object(); 
    $('#owner option').each(function(){ 
     var obj = $(this); 
     if(obj.attr("value") != "") 
      options[obj.attr('value')] = obj.html(); 
     else 
      emptyOption = obj.html(); 
    }); 
    selObj = $('#owner'); 
}; 

filter = function(elem){ 
    var filter = elem.val(); 
    var selected = $('#owner option:selected').val(); 

    //delete all options and add the empty option 
    selObj.html(""); 
    selObj.append("<option> "+emptyOption+" </option>"); 

    //add all options conaining the filter string 
    for(value in options){ 
     var option = options[value]; 
     if((options[value]).indexOf(filter) != -1){ 
      selObj.append("<option value='"+value+"'> "+options[value]+" </option>"); 
     } 
    } 

    //select the previously selected option 
    $("#owner option[value = '"+selected+"']").prop("selected", true); 
} 

Answer 8

$(document).ready(function() { 
 
    $("#myInput").on("keyup", function() { 
 
    var value = $(this).val().toLowerCase(); 
 
    $("#filter *").filter(function() { 
 
     $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<h2>Filter</h2> 
 
<input id="myInput" type="text" placeholder="Search.."> 
 
<br><br> 
 
<div class="filter-by"> 
 
    <span>Filter by:</span> 
 
    <select class="status-filter" id="filter"> 
 
    <option value="">All</option> 
 
    <option value="paid">Paid</option> 
 
    <option value="accepted">Accepted</option> 
 
    <option value="pending">Pending</option> 
 
    <option value="rejected">Rejected</option> 
 
    </select> 
 
</div>