如何使用帶有AJAX JSON數據的jQuery自動完成組合框？

我需要使用組合框執行以下操作。如何使用帶有AJAX JSON數據的jQuery自動完成組合框？

Select box有一個用戶可以從中搜索的默認城市列表。
如果用戶在input框中鍵入文本，我需要進行ajax調用以獲取數據並向用戶顯示選項。
如果數據是獲取用戶的要求，這些城市應該被追加到Select box

使用jQuery autocomplete我能夠在用戶輸入字符串和顯示結果獲取JSON數據的選項。但是，我對如何使用組合框來集成這個問題還不甚瞭解。

Combobox使用靜態數據數組進行搜索，如果我正確理解這一點，則使用正則表達式來匹配值。但是，如何中斷它並使用ajax調用從服務器獲取數據並更新結果？

的自動完成輸入文本框：

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

    }); 
    });

來源

2012-05-29 brainydexter

你的自動完成源數據是什麼樣的？ –

@ltiong_sh簡單輸入文本框的我的自動完成功能可以很好地使用JSON。（雖然更新我的答案） – brainydexter

當你說取回列表應該被追加到默認列表，這是否意味着默認項目將永遠visibile，或將他們過濾以及..基於用戶輸入？ –

這可能會幫助你.. another autocomplete插件，我使用。

又讀this

如果你想在文本字段中動態加載數據，上面的插件去。否則，如果你想使用組合框，然後加載數據就緒（）並使用jquery自動完成插件！

來源

2012-05-29 09:58:23 Jebin

我希望能夠擴展/重用jQuery網站上的組合框。另外，由於相當多的數據，因此無法加載所有onReady數據。需要根據輸入文本框中指定的前綴進行前綴搜索。 – brainydexter

爲什麼它必須是組合框，爲什麼不是文本字段？ – Jebin

我的要求是，我需要一個基於前綴匹配的自動完成功能的文本框和一個產生所有選項的組合框。 – brainydexter

爲什麼不重複插件和兩個組合框。

然後：

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

PHP文件（這是基於笨）：

<?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); 
} 
?>

希望這有助於。

來源

2014-02-08 23:24:45 Dharmesh

如何使用帶有AJAX JSON數據的jQuery自動完成組合框？

回答

相關問題