Как изменить js src путем ввода пользователем

Question

Я использую API Google Книги API PHP и хотел бы изменить ключевое слово поиска, когда пользователь вводит его, чтобы возвращать подсказки сразу. Как реализовать так, чтобы q=what user types right now?

<script src="https://www.googleapis.com/books/v1/volumes?q=harry+potter&callback=handleResponse"></script> 

Answer 1

Чтобы сделать это эффективно, удалить &callback=handleResponse поэтому фактический ответ вы получите обратно JSON.

В вашем JavaScript установить переменную так:

var request = 'https://www.googleapis.com/books/v1/volumes'; 

имеют форму (содержащую текстовое поле и представить) обработчик с чем-то вроде этого:

$('#form').onsubmit(function(e){ 
    e.preventDefault(); 
    var keywords = $('#myTextAreaInputInsideTheForm').val(); 
    $.getJSON(request + '?q=' + keywords, function(data){ 
    //do stuff with the json response 
    console.log(data); 
    }); 
}); 

Или, если вам требуется XMLHttpRequest, чтобы быть каждый раз что-то меняется в текстовом поле

$('#myTextArea').on('keyup', function(){ 
     var keywords = $(this).val(); 
     $.getJSON(request + '?q=' + keywords, function(data){ 
     //do stuff with the json response 
     console.log(data); 
     }); 
}); 

EDIT: Я предполагаю, что вы используете текстовое поле, но <input type="text"/> также работает.

EDIT2:DEMO Демонстрация может не работать, потому что google теперь возвращает 403 запрещенных. Вы не должны вызывать URL слишком много раз, иначе Google будет блокировать ваш запрос. Я рекомендую называть его каждую пару писем. Удачи.

var request = 'https://www.googleapis.com/books/v1/volumes'; 
$('#myTextArea').on('keyup', function(){ 

     var keywords = $(this).val(); 
    if(keywords.length > 0 && keywords.length % 5 == 0){ 
      $.getJSON(request + '?q=' + keywords, function(data){ 
      //do stuff with the json response 
      console.log(data); 
      }); 
    } 
}); 

Использование keyup лучше, чем изменение.