Làm thế nào để sử dụng hộp kết hợp tự động hoàn thành jQuery với dữ liệu JSON AJAX?

Question

Tôi cần phải làm như sau bằng cách sử dụng combobox.

• Select box có danh sách mặc định các thành phố mà người dùng có thể tìm kiếm.
• Nếu người dùng nhập văn bản vào hộp input, tôi cần thực hiện cuộc gọi ajax để tìm nạp dữ liệu và hiển thị các tùy chọn cho người dùng.
• Nếu dữ liệu là lấy cho yêu cầu của người dùng, những thành phố nên được nối thêm vào các tùy chọn của Select box

Sử dụng jQuery autocomplete Tôi có thể lấy dữ liệu json trên người dùng nhập vào một chuỗi và hiển thị kết quả. Tuy nhiên, tôi khá thất bại về cách tích hợp này bằng cách sử dụng combobox.

Combobox sử dụng mảng dữ liệu tĩnh để tìm kiếm và nếu tôi hiểu chính xác, hãy sử dụng cụm từ thông dụng để khớp với các giá trị. Tuy nhiên, làm thế nào để tôi làm gián đoạn nó và sử dụng cuộc gọi ajax để lấy dữ liệu từ máy chủ và cập nhật kết quả?

Autocomplete cho đầu vào hộp văn bản:

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

này có thể giúp bạn .. another autocomplete Plugin mà tôi sử dụng.

Cũng đọc this

Nếu bạn muốn tải dữ liệu động trong lĩnh vực văn bản, đi với plugin trên. Khác nếu bạn muốn đi với combo box, sau đó chỉ cần tải dữ liệu trên ready() và sử dụng jquery auto complete plugin!

Answer 2

Tại sao bạn không sao chép các plugin và hai hộp kết hợp.

Sau đó:

 $("#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 tập tin (Điều này được dựa trên 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); 
} 
?> 

Hope this helps.