JQueryUI Автозаполнение и Datalist вместе

Question

У меня есть форма поиска HTML с одним входом. в поле ввода пользователь может написать три разные вещи: название области, название трека, другие ключевые слова.

• области отсутствуют в базе данных, поэтому у меня есть поле списка данных (HTML), подключенное к моему входу, которое автоматически заполняет имя области для пользователя.
• Треки взяты из БД, поэтому у меня есть автозаполнение JqueryUI, загружающее имена с сервера, и когда пользователь выбирает имя, сайт отправляет его на нужную страницу.
• когда пользователь заполняет что-либо еще и нажимает кнопку поиска, формы отправляют его на страницу поиска с правильными результатами.

моя проблема заключается в:

Я хочу, чтобы поиск отправлял пользователя на страницу области, если пользователь выбирает имя области из списка. У jquery autocomplete есть реквизиты select. у datalist есть что-то похожее? может есть опция автозаполнения будет загружаться с двух разных ресурсов? (один клиент и один сервер)

<form action="" method="get">
   <input class="auto" name="desc" list="areas" />
   <button type="submit">seatch</button>
   <datalist id="areas">
       <option id="area1" value="area1" >1</option>
       <option id="area2" value="area2" >2</option>
       <option id="area2" value="area2" >2</option>
   </datalist>
</form>

сценарий:

 $('.auto').autocomplete({
    source:"php/autocomplete.php",
    minLength:1,
    select: function(event,ui){
        changePage('content/trek.php', {
            Trek_Id:ui.item.Trek_Id
        });
    }
});

Спасибо заранее Хаим

Answer 1

К сожалению, поддержка datalist все еще посредственно в лучшем случае, и нет никаких событий для этого элемента специально. Лучший вариант - сравнить значение входных данных, с которыми он связан, с доступными параметрами в списке данных. Если совпадение найдено, вы можете использовать эту информацию, чтобы перейти к URL области вместо отправки формы.

Вы уже используете jQuery, поэтому я написал быстрое решение:

$('form').submit(function(e) {
   var $input = $(this).find('input.auto');
       val = $input.val();
       list = $input.attr('list'),
       match = $('#'+list + ' option').filter(function() {
           return ($(this).val() === val);
       });
    
    if(match.length > 0) {
        e.preventDefault();

        var area = match.val();       
        alert('Navigate to ' + area);
        
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="get">
   <input class="auto" name="desc" list="areas" />
   <button type="submit">seatch</button>
   <datalist id="areas">
       <option id="area1" value="area1" >1</option>
       <option id="area2" value="area3" >3</option>
       <option id="area2" value="area2" >2</option>
   </datalist>
 </form>

При отправке это проверит, точно ли значение во входных данных совпадает со значением параметра списка данных. Если это так, он покажет предупреждение (замените его на выбранную вами функцию), в противном случае он просто отправит форму.