Отправка поисковых запросов вместо поиска в реальном времени (функция keyup)

Question

Я - Карл, и я до сих пор новичок в этом месте и новичок, когда дело доходит до кодирования. Пожалуйста, несите меня. Я больше в HTML и CSS. Недавно я нашел this Live Search tutorial на основе AJAX, JQuery и JSON, где функция поиска реагирует мгновенно с момента ввода текста в поле ввода. Команда keyup(), похоже, имеет какое-то отношение к этому.

$('#search').keyup(function(){ 
var searchField = $('#search').val(); 
var myExp = new RegExp(searchField, 'i'); 
$.getJSON('data.json', function(data){ 
    var output = '<ul class="searchresult">'; 
    $.each(data, function(key, val){ 
    if((val.name.search(myExp) != -1) || (val.bio.search(myExp) != -1)) { 
(...) 

Я сейчас тестирую этот прямой поиск на локальном сервере. (Работает как шарм.)

Мне было интересно, можно ли отправить пользовательские запросы/условия поиска, отправив их с помощью клавиши ввода (обычным способом) и/или с помощью кнопки поиска/отправки. Я попытался заменить keyup функция с submit. Что-то вроде на this video, например. Я попытался применить такую ​​подачу, о которой упоминалось в вышеупомянутом видео, но я не получил его для работы соответственно. Я даже искал различные учебники через Google, много разных видеороликов на Youtube, DailyMotion и т. Д. И даже сравнивал многие вопросы здесь, в stackoverflow и других подобных сайтах. Скорее всего, я пропустил лес для деревьев.

Любая помощь была бы принята с благодарностью. Заранее спасибо.

Answer 1

Чтобы определить, использовалась ли кнопка ввода, вы должны проверить аргумент события «который» для кода 13 (некоторые примеры кода: Submitting a form on 'Enter' with jQuery?).

Вы также должны прослушивать событие размытия поля. (http://www.w3schools.com/jsref/event_onblur.asp)

И последнее: для отправки через кнопку отправки вы должны прослушать нажатие кнопки для этой кнопки. (http://api.jquery.com/on/)

Answer 2

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

function ajaxSubmit(event){ 
 
    event.preventDefault(); 
 
    
 
    alert('submit stopped'); 
 
    
 
    //ajax code here 
 
    
 

 
};

<form action="" method="post" onSubmit="ajaxSubmit(event)"> 
 
    
 
    <label for="search">Search box:</label><br> 
 
    <input type="search" placeholder="Write here and press enter" id="search"> 
 
    
 
</form>