2016-08-05 4 views
1

У меня есть ввод текста с помощью datalist. Это DataList заполняется динамический с PHP:Javascript: сопоставьте параметры datalist на основе ввода

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

Есть простой способ сохранить все DataList опции в яваскрипта массиве?

EDIT:

Или лучше: Есть ли способ, чтобы проверить с JavaScript, если текст в поле ввода является опцией в DataList?

ответ

1

Ответ для «Или лучшая часть»

Это должно быть довольно легко сделать это только в JavaScript, как вы спрашиваете, без преобразования в массив JSON и выполнение javascript-совпадения.

Прилагается пример фрагмента. Вот пример, который проверяет, соответствует ли значение, вводимое во вводе, любому из параметров или нет.

Вот что он делает, на каждой клавиатуре на входе проверяет, есть ли опция в каталоге данных, которая соответствует введенному пользователю ввода. Вы можете изменить часть функции фильтра 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>

2

Да есть:

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