2013-09-30 16 views
6

Tôi cố gắng để hiển thị phù hợp nhất trong những thuật ngữ tìm kiếm gõ vào. Ví dụJquery Autocomplete phù hợp với nhiều từ có thứ tự trong một chuỗi

Ngay bây giờ Jquery không cho tôi hiệu quả mong muốn. Khi tôi nhập: ngày hôm nay tính năng tự động hoàn thành sẽ không hiển thị gì nhưng nếu tôi nhập một ngày, nó sẽ hiển thị kết quả tìm kiếm bắt đầu bằng hai từ đó theo thứ tự đó. Tôi muốn một ngày hôm nay để hiển thị một ngày là ngày đầu tiên và cuối cùng ngày hôm nay. Tôi muốn các kết quả tìm kiếm hiển thị có những từ trong đó thứ tự không quan trọng. Tôi đã xem xét ở đây và không thể tìm thấy gì như thế này, nó có vẻ giống như một phương pháp tìm kiếm thông thường, tôi không thể thấy tại sao không ai hỏi câu hỏi này. Có phương pháp tích hợp nào xử lý việc này không?

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Autocomplete - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
    $(function() { 
    var availableTags = [ 

      "one day is the first and last today" , "tuesday is today" , "one" , "one day is tomorrow" 


    ]; 
    $("#tags").autocomplete({ 
     source: availableTags, multiple: true, 
     mustMatch: false 
    }); 
    }); 
    </script> 
</head> 
<body> 

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags" /> 
</div> 


</body> 
</html> 
+3

Tôi nghĩ rằng những gì bạn muốn là tìm kiếm mờ. Trong nháy mắt, một cái gì đó như http://kiro.me/projects/fuse.html có thể phù hợp với ưa thích của bạn. –

+0

Cảm ơn bạn, tôi chưa bao giờ nghe thuật ngữ đó trước đây. –

+0

Và đối với mã HTML, [jsfiddle] (http://jsfiddle.net) rất hữu ích cho việc lưu trữ các ví dụ. –

Trả lời

10

Thử ghi đè logic bộ lọc mặc định do tự động hoàn thành.

// Overrides the default autocomplete filter function to search for matched on atleast 1 word in each of the input term's words 
$.ui.autocomplete.filter = function (array, terms) { 
    arrayOfTerms = terms.split(" "); 
    var term = $.map(arrayOfTerms, function (tm) { 
     return $.ui.autocomplete.escapeRegex(tm); 
    }).join('|'); 
    var matcher = new RegExp("\\b" + term, "i"); 
    return $.grep(array, function (value) { 
     return matcher.test(value.label || value.value || value); 
    }); 
}; 

Fiddle

Hoặc tạo chức năng lọc của riêng bạn và xử lý sự trở lại của tìm kiếm, vì vậy giữ chức năng lọc hoàn chỉnh như nó được.

function customFilter(array, terms) { 
    arrayOfTerms = terms.split(" "); 
    var term = $.map(arrayOfTerms, function (tm) { 
     return $.ui.autocomplete.escapeRegex(tm); 
    }).join('|'); 
    var matcher = new RegExp("\\b" + term, "i"); 
    return $.grep(array, function (value) { 
     return matcher.test(value.label || value.value || value); 
    }); 
}; 

$("#tags").autocomplete({ 
    source: availableTags, 
    multiple: true, 
    mustMatch: false 
    ,source: function (request, response) { 
     response(customFilter(
     availableTags, request.term)); 
    }, 
}); 

Fiddle

+0

Cảm ơn bạn rất nhiều! Tôi sẽ fiddle với nó để làm cho tất cả các từ tìm kiếm bắt buộc trong kết quả. –

+2

@ColonelCese Bạn được chào đón. Chọn tùy chọn thứ hai để bạn không ghi đè bộ lọc tự động hoàn thành hiện tại. – PSL

Các vấn đề liên quan