Javascript : 입력에 따라 데이터리스트 옵션 일치

Question

데이터리스트에 텍스트 입력이 있습니다. 이 DataList에 PHP는 동적 가득 :

<input type="text" name="city" list="cities" id="city"> 
    <datalist id="cities"> 
     <?php 
     foreach($cities as $city){ 
     echo '<option value="'.$city.'" />'; 
     } 
     ?> 
    </datalist> 
</input> 

자바 스크립트 배열의 모든 DataList에 옵션을 저장하는 쉬운 방법이 있나요?

편집 :

또는 더 나은 : 입력 필드에 텍스트가 DataList에의 옵션 인 경우 자바 스크립트로 확인하는 방법이 있나요?

Answer 1

대답

당신이 JSON 배열로 변환하지 않고 요청으로 그냥 자바 스크립트에서이 작업을 수행하는 것이 매우 용이해야한다 및 자바 스크립트 일치를 실행합니다.

예제 스 니펫이 첨부되었습니다. 다음은 입력 된 값이 옵션과 일치하는지 여부를 확인하는 예제입니다.

입력 내용의 각 키 입력시 입력 된 입력 사용자와 일치하는 옵션이 데이터 목록에 있는지 확인합니다. 어떤 종류의 일치 작업을 수행하려면 필터 함수의 return 부분을 변경할 수 있습니다.

$("#city").on('keyup',function(e){ 
 
    var option = $('#cities option').filter(function() { 
 
     return this.value === $("#city").val(); 
 
    }).val(); 
 
    
 
    if(option) $("#output").html("Match Found:"+ option) 
 
    else $("#output").html(""); 
 
});

#output{ 
 
    margin-top: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<input type="text" list="cities" id="city"> 
 

 
<datalist id="cities"> 
 
    <option value="Volvo"> 
 
    <option value="Saab"> 
 
    <option value="Mercedes"> 
 
    <option value="Audi"> 
 
</datalist> 
 

 
<span id="output"></span>

Answer 2

예가 : 당신의 "또는 더 나은 제품"에 대한

var cities = <?=json_encode($cities)?>;