botón 'buscar' para activar la función autocompletar

Question

Estoy usando el complemento Autocompletar de jQuery UI. ¿Hay alguna manera en que pueda usar un botón de "búsqueda" para activar la consulta en lugar de hacer que el cuadro de texto Autocompletar lo haga? Mis usuarios tienen una conexión a Internet realmente mala y el Autocompletar se les hace difícil de usar.

Answer 1

Sí, es can be done. Para detener la búsqueda que se produce de forma natural, la longitud mínima para un término de búsqueda se incrementa a (un arbitrario) 1000 caracteres. Al mismo tiempo, la búsqueda en sí misma se ha desencadenado de forma programática en un evento .click() vinculado a un botón; esto está documentado en la pestaña Eventos en this page. El minLength se establece en 0 (por lo que la búsqueda se activará) justo antes de activar la búsqueda y se establece en 1000 cuando se cierra el autocompletado.

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

La idea es apagar las autocompletar sucediendo en eventos de texto añadiendo. En foco deshabilitamos la función autocompletar y lo habilitamos al presionar un botón o al presionar la tecla Intro.

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