AJAX JSON 데이터에 jQuery 자동 완성 콤보 박스를 사용하는 방법은 무엇입니까?

Question

콤보 상자를 사용하여 다음 작업을 수행해야합니다.

• Select box에는 사용자가 검색 할 수있는 도시의 기본 목록이 있습니다.
• 사용자가 input 상자에 텍스트를 입력하면 데이터를 가져 와서 옵션을 사용자에게 표시하기 위해 ajax 호출을해야합니다. 데이터가 사용자의 요청에 대한 처가 경우
• 는, 그 도시는 내가 문자열을 입력하고 결과를 표시하는 사용자에 JSON 데이터를 가져올 수 있어요 jQuery autocomplete를 사용 Select box

의 옵션에 추가해야합니다. 그러나, 나는 이것을 콤보 박스를 사용하여 어떻게 통합 할 것인가에 관해서는 꽤 우둔하다.

Combobox은 (는) 정적 데이터 배열을 검색하는 데 사용되며, 올바르게 이해하면 정규 표현식을 사용하여 값을 일치시킵니다. 그러나, 어떻게 그것을 중단하고 서버에서 데이터를 가져오고 결과를 업데이 트하는 아약스 호출을 사용합니까?

자동 완성 입력 텍스트 상자 :

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

이 당신에게 도움이 될 수 있습니다 .. 내가 사용 another autocomplete 플러그인. 당신이 텍스트 필드에 데이터를 동적으로로드 위의 플러그인 가고 싶은 경우

또한 this

를 참조하십시오. 콤보 박스로 가고 싶다면 ready()에 데이터를로드하고 jquery auto complete plugin을 사용하십시오!

Answer 2

왜 플러그인과 두 개의 콤보 상자를 복제하지 않습니까? 그런 다음

:

 $("#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 파일 (이것은 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); 
} 
?> 

희망.