jQuery가 자동 완성 기능을 사용하여 텍스트 상자 입력을 제한했습니다.

Question

jQuery UI의 자동 완성 기능을 사용하여 양식에 대한 올바른 입력을 전파하려고 시도했습니다.

자동 완성 기능이 제대로 작동하지만 필드의 값을 그 값으로 제한하려면 어떻게해야합니까? 형태

자동 완성 코드 : 자동 완성 소스

$('#animal').autocomplete({ 
    source: "search_species.php", 
    minLength: 3, 
    select: function(event, ui) { 
     $('#animal').val(ui.item.postcodes); 
     $('#code').val(ui.item.code); 
     $('#family').val(ui.item.family); 
    } 
}); 

코드 :

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'); 
mysql_select_db($dbname); 
$return_arr = array(); 

if ($conn){ 
    $fetch = mysql_query(
     "SELECT * FROM animals where animals like '%" . mysql_real_escape_string($_GET['term']) . "%'" 
    ); 

    /* Retrieve and store in array the results of the query.*/ 
    while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) { 
     $row_array['id'] = $row['id']; 
     $row_array['value'] = $row['animals']; 
     $row_array['family'] = $row['family']; 
     $row_array['code'] = $row['code']; 
     array_push($return_arr,$row_array); 
    } 
} 

mysql_close($conn); 
echo json_encode($return_arr); 

내가 말했듯이, 자동 완성 작품. 사람들이 자신의 값을 입력 할 수 없도록 텍스트 필드의 값을 검색의 값으로 제한하는 방법을 알아야합니다.

미리 감사드립니다.

Answer 1

몇 가지 방법이 있습니다.

드롭 다운에서 아무 것도 선택하지 않은 경우 입력 값을 지우는 것이 한 가지 방법이며 제출시 입력란을 비어 있지 않게 강제하는 것입니다. 값을 지우는 좋은 방법은 메뉴가 변경되거나 닫힐 때 자동 완료 이벤트를 사용하는 것입니다. 이름은 change입니다. 이 이벤트는 항목이 선택되거나 입력이 포커스를 잃으면 발생합니다. 사용자가 메뉴에서 항목을 선택하지 않은 경우 ui.item 값은 null이되며 입력에 남아있는 입력 된 값을 지울 수 있습니다.

당신은이 같은 방법을 구현할 수

: 당신이 항목이 아닌 한에 이동에서 사용자를 방지하기 위해 사용하고 무엇이든 양식 유효성 검사에 체크를 추가하는 간단한, 또는 여기에서

$('#animal').autocomplete(
    { 
     source: "search_species.php", 
     minLength: 3, 
     select: function(event, ui) { 
      $('#animal').val(ui.item.postcodes); 
      $('#code').val(ui.item.code); 
      $('#family').val(ui.item.family); 
     }, 
     change: function(event, ui) { 
      if(ui.item === null || !ui.item) 
       $(this).val(''); /* clear the value */ 
     } 
    }); 

을 selected - 입력 값이 비어 있지 않음을 확인합니다.