¿Cómo usar un combobox de autocompletar jQuery con datos AJAX JSON?

Necesito hacer lo siguiente usando un cuadro combinado.¿Cómo usar un combobox de autocompletar jQuery con datos AJAX JSON?

Select box tiene una lista predeterminada de las ciudades que el usuario puede buscar.
Si un usuario escribe texto en el cuadro input, debo hacer una llamada ajax para obtener datos y mostrar las opciones al usuario.
Si los datos fue exagerado por la petición del usuario, esas ciudades deberían ser agregadas a las opciones de Select box

Uso jQuery autocomplete soy capaz de obtener los datos JSON de usuario que introduce una cadena y mostrar los resultados. Sin embargo, no tengo ni idea de cómo integrar esto usando el combobox.

Combobox utiliza una matriz de datos estáticos para buscar y si entiendo esto correctamente, usa la expresión regular para hacer coincidir los valores. Sin embargo, ¿cómo lo interrumpo y uso la llamada ajax para recuperar datos del servidor y actualizar los resultados?

Autocompletar para cuadro de texto de entrada:

$("#searchDestination").autocomplete({ 
     delay: 500, 
     source: function(request, response) { 
      $.ajax({ 
       url: "/wah/destinationsJson.action", 
       dataType: "json", 
       data: { 
        term: request.term 
       }, 
       type: "POST", 
       success: function(data){ 
        if(data.cities.length == 0) 
         return response(["No matching cities found for " + request.term]); 
        response($.map(data.cities, function(item){ 
         return{ 
          label: item.name, 
          value: item.name 
         }; 
        }) 
        ); 
       } 
      }); 
     }, 
     minLength: 2 

    }); 
    });

Fuente

2012-05-29 brainydexter

¿cómo se ven los datos de origen de autocompletar? –

@ltiong_sh Mi autocompletar para el cuadro de texto de entrada simple funciona bien con JSON. (sin embargo, actualicé mi respuesta) – brainydexter

cuando dices que la lista captada debe anexarse a la lista predeterminada, ¿eso significa que los elementos predeterminados siempre serán visibles, o se filtrarán también ... en función de las entradas del usuario? –

Esto puede ayudarle a .. another autocomplete plugin que he usado.

Lea también this

Si desea cargar datos de forma dinámica en el campo de texto, vaya con el plugin anteriormente. De lo contrario, si desea ir con el cuadro combinado, simplemente cargue los datos en ready() y use el plugin jquery auto complete!

Fuente

2012-05-29 09:58:23 Jebin

Esperaba ampliar/reutilizar el cuadro combinado en el sitio de jquery. Además, no se pueden cargar todos los datos en Ready ya que son bastantes datos. Es necesario hacer una búsqueda de prefijo según el prefijo especificado en el cuadro de texto de entrada. – brainydexter

¿Por qué debería ser necesariamente un cuadro combinado y por qué no un campo de texto? – Jebin

Mi requisito es tal que necesito tanto un campo de texto que funcione como un autocompletado basado en la coincidencia de prefijos y un cuadro combinado que produzca todas las opciones. – brainydexter

¿Por qué no duplicas los complementos y dos cuadros combinados?

continuación:

 $("#combobox1").combobox1({ 
      select: function (event, ui) { 
      var value = ui.item.value;/*Whatever you have chosen of this combo box*/ 
      $.ajax({ 
       type: "POST", 
       dataType: 'json', 
       url: "script.php", 
       data: { 
       'anything':value 
       }, 
       success: function(res) 
       { 
       /*replace your next combo with new one*/ 
       $("select#combobox2").html(res); 
       } 
      }); 
     } 
    }); 
    $("#toggle").click(function() { 
    $("#combobox1").toggle(); 
    }); 

    $("#combobox2").combobox2(); 

    $("#toggle").click(function() { 
    $("#combobox2").toggle(); 
    });

archivo PHP (Esto se basa en CodeIgniter):

<?php 
    $data['response'] = 'false'; 
    $keyword = $_POST['anything']; 
    $query4 = $this->db->query("SELECT * FROM table WHERE field='".$keyword."'"); 
    $data.= "<option></option>"; 
    if($query4->num_rows() > 0) 
    { 
     foreach($query5->result_array() as $row) 
     { 
     $data.= "<option>".$row['something']."</option>"; 
     } 
    } 
    echo json_encode($data); 
} 
?>

Espero que esto ayude.

Fuente

2014-02-08 23:24:45 Dharmesh

¿Cómo usar un combobox de autocompletar jQuery con datos AJAX JSON?

Respuesta

Cuestiones relacionadas