'搜索'按鈕來激活自動完成功能

Question

我正在使用jQuery UI自動完成插件。有沒有一種方法可以使用「搜索」按鈕來激活查詢，而不是讓自動填充文本框執行它？我的用戶有一個真正糟糕的互聯網連接，自動完成功能變得很難讓他們使用。

Answer 1

是的，它can be done。要停止自然搜索，搜索詞的最小長度將增加到（任意）1000個字符。與此同時，搜索本身已被編程式觸發，綁定到一個按鈕的.click()事件 - 這在this page的事件選項卡中有記錄。 minLength在觸發搜索之前設置爲0（因此搜索實際上會觸發），並在自動完成關閉時將其設置回1000。

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

的想法是關閉自動完成發生在文本中添加事件。在焦點上，我們禁用自動完成功能，並在按下按鈕或按下回車鍵時啓用它。

<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>