Форма поиска + запрос по JS + json + AJAX?

Question

[Lulzsec]

Здравствуйте.

Имеется:
1) у моего сайта есть простое API, по запросу выдается json.
2) на сайте есть форма поиска чего-либо

Хочу сделать следующее:
1) При вводе каждого символа в форму отправляется запрос к моему же сайту (пусть будет site.ru/api/search?q=123)
2) Чуть ниже формы подгружается найденный контент из 1-ого пункта

Есть ли готовые решения или библиотеки? Спасибо!

Answer 1

[Ramm]

Используйте событие onChange

$(document).ready(function(){
    $(".matchedit").on('input', function postinput(){
        var matchvalue = $(this).val(); // this.value
        $.ajax({ 
            url: 'matchedit-data.php',
            data: { matchvalue: matchvalue },
            type: 'post'
        }).done(function(responseData) {
            // подгружаете контент (responseData) в HTML
        }).fail(function() {
            console.log('Failed');
        });
    });
});

Comments

[Lulzsec]

Почему-то скрипт реагирует не на каждое нажатие, а если напечатал и кликнул рядом с формой

[Ramm]

Lulzsec, вы на input ставите on ?

[Lulzsec]

Ramm, да

[Ramm]

Lulzsec, изменил код на on input
https://jsfiddle.net/v4xtwk6a/1/

[Lulzsec]

Ramm, помогло, спасибо!