2011-07-15 58 views
5

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.botón 'buscar' para activar la función autocompletar

+0

? http://stackoverflow.com/questions/6709014/answer/submit –

Respuesta

7

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()); 
}); 
+0

¡perfecto! Gracias. – Roger

+1

¡Feliz de ayudar! De hecho, pensé que autocompletar ya lo hice de forma nativa, así que aprendí algo en el proceso :-) ¿Sabías que puedes aceptar respuestas? Consulte http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – andyb

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

por favor publique más detalles sobre el contenido, será útil saber lo que quiere o idea, gracias –

Cuestiones relacionadas