jqueryUI autocomplete и datalist вместе

Question

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

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

моя проблема:

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

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