Come utilizzare una combobox con completamento automatico jQuery con dati JSON AJAX?

Question

Ho bisogno di fare quanto segue usando una combobox.

• Select box ha un elenco predefinito di città da cui l'utente può cercare.
• Se un utente digita il testo nella casella input, è necessario effettuare una chiamata ajax per recuperare i dati e visualizzare le opzioni per l'utente.
• Se i dati è stato recuperato per la richiesta dell'utente, quelle città deve essere aggiunta alle opzioni di Select box

Uso jQuery autocomplete sono in grado di recuperare i dati JSON su utente inserendo una stringa e la visualizzazione dei risultati. Tuttavia, sono abbastanza all'oscuro su come integrare questo utilizzando la combobox.

Combobox utilizza una matrice di dati statici per ricercare e se ho capito bene, utilizza espressioni regolari per abbinare i valori. Tuttavia, come lo interrompo e utilizzo la chiamata ajax per recuperare i dati dal server e aggiornare i risultati?

completamento automatico per la casella di testo di input:

$("#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 

    }); 
    }); 

Answer 1

Questo può aiutare .. another autocomplete plugin che ho usato.

visualizzato anche this

Se si desidera caricare i dati in modo dinamico nel campo di testo, andare con sopra plugin. Altrimenti se vuoi andare con la casella combinata, poi carica i dati su ready() e usa il plugin jquery auto complete!

Answer 2

Perché non duplicare il plugin e due caselle combinate.

Poi:

 $("#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(); 
    }); 

file PHP (Questo si basa su 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); 
} 
?> 

Spero che questo aiuti.