Jak korzystać z combobox autouzupełniania jQuery z danymi AJAX JSON?

Question

Potrzebuję wykonać następujące czynności, używając combobox.

• Select box ma domyślną listę miast, z których użytkownik może wyszukiwać.
• Jeśli użytkownik wpisze tekst w polu input, muszę wykonać wywołanie ajax, aby pobrać dane i wyświetlić opcje dla użytkownika.
• Jeśli dane były pobierane na żądanie użytkownika, te miasta powinny być dołączone do opcji Select box

Korzystanie jQuery autocomplete jestem w stanie pobrać dane json Po wejściu ciąg i wyświetlania wyników użytkownika. Nie mam pojęcia, jak to zintegrować za pomocą combobox.

Combobox używa statycznej tablicy danych do wyszukiwania i jeśli rozumiem to poprawnie, używa wyrażeń regularnych do dopasowywania wartości. Jak jednak go przerwać i używa wywołania ajax, aby pobrać dane z serwera i zaktualizować wyniki?

autouzupełnianie na polu wejściowym:

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

To może pomóc .. another autocomplete plugin który użyłem.

przeczytać również this

Jeżeli chcesz załadować dane dynamicznie w polu tekstowym, iść z powyższej wtyczki. Inaczej, jeśli chcesz skorzystać z pola kombi, po prostu wczytaj dane w trybie gotowym() i używaj automatycznej wtyczki jquery!

Answer 2

Dlaczego nie duplikuje się wtyczek i dwóch pól kombinowanych.

Następnie:

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

plik PHP (ta opiera się na 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); 
} 
?> 

Nadzieja to pomaga.