nút ‘tìm kiếm’ để kích hoạt tự động hoàn thành

Question

Tôi đang sử dụng trình cắm thêm Tự động điền UI jQuery. Có cách nào tôi có thể sử dụng nút ‘tìm kiếm’ để kích hoạt truy vấn thay vì có hộp văn bản Tự động điền không? Người dùng của tôi có kết nối internet thực sự tồi tệ và tính năng Tự động điền trở nên khó khăn để họ sử dụng.

Answer 1

Có, nó can be done. Để ngăn tìm kiếm xảy ra một cách tự nhiên, độ dài tối thiểu cho cụm từ tìm kiếm được tăng lên đến (một tùy ý) 1000 ký tự. Đồng thời, chính tìm kiếm đã được kích hoạt theo chương trình trong sự kiện .click() được liên kết với một nút - điều này được ghi lại trong tab Sự kiện trên this page. MinLength được đặt thành 0 (vì vậy tìm kiếm sẽ thực sự kích hoạt) ngay trước khi kích hoạt tìm kiếm và nó được đặt trở lại 1000 khi quá trình tự động hoàn tất.

HTML:

<label for="tags">Tags: </label> 
<input id="tags" /> 
<input type="button" value="Search"/> 

JavaScript:

var availableTags = [ 
    'ActionScript', 
    'AppleScript', 
    'Asp', 
    'BASIC', 
    'C', 
    'C++', 
    'Clojure', 
    'COBOL', 
    'ColdFusion', 
    'Erlang', 
    'Fortran', 
    'Groovy', 
    'Haskell', 
    'Java', 
    'JavaScript', 
    'Lisp', 
    'Perl', 
    'PHP', 
    'Python', 
    'Ruby', 
    'Scala', 
    'Scheme' 
    ]; 

$('#tags').autocomplete({ 
    source: availableTags, 
    minLength: 1000, 
    close: function(event, ui) { 
     $('#tags').autocomplete('option', 'minLength', 1000); 
    } 
}); 

$('input[type="button"]').click(function() { 
    $('#tags').autocomplete('option', 'minLength', 0); 
    $('#tags').autocomplete('search', $('#tags').val()); 
}); 

Answer 2

Ý tưởng là để turn-off autocomplete xảy ra trên các sự kiện văn bản bổ sung. Về tiêu điểm, chúng tôi vô hiệu hóa tính năng tự động hoàn tất và bật tính năng này khi nhấn nút hoặc nhấn phím enter.

<script type="text/javascript"> 
$(window).load(function() 
{ 
    // Creates the autocomplete field 
    $("#lookUpField").autocomplete(
    { 
     source: ["Luis", "Erick", "Jorge", "Ana", "Anabel"], 
     disabled: true 
    }); 

    //disables the search trigger when field selected 
    $("#lookUpField").focus(function() 
    { 
     $("#lookUpField").autocomplete("disable"); 
    }); 


    // disables the field on keypress unless the 'enter' key 
    // is pressed in which case it triggers a 'search' 
    $('#lookUpField').keypress(function (e) 
    { 
     if (e.which == 13) 
     { 
      lookUpData(); 
     } 
     else 
     { 
      $("#lookUpField").autocomplete("disable"); 
     } 
    }); 
}); 

function lookUpData() 
{ 
    $("#lookUpField").autocomplete("enable"); 
    $("#lookUpField").autocomplete("search"); 
} 
</script> 


<div> 
    <input id="lookUpField" type="text" /> 
    <input type="button" value="Go" onclick="lookUpData()" /> 
</div>