Ответ 1

0. TL;DR

Здесь рабочая скрипка, используя Google https://suggestqueries.google.com/complete/search

Параметры:

output/client  # "toolbar" => xml, "firefox" => json, "chrome" => jsonp
ds             #  which site to search in ("bo" for books, "yt" for youtube...)
q              #  search term: "sher"

Query:

https://suggestqueries.google.com/complete/search?output=firefox&ds=bo&q=sher

Результаты:

["sher",["sherlock holmes","sherrilyn kenyon","sherman alexie","sheryl sandberg","sherlock","sherlock holmes short stories","sherlock holmes book","sher o shayari","sherlock holmes novels","sher shah suri"]]

1. Предложения и результаты поиска

Первое, что нужно понять, это то, что, когда Google делает предложения, они не являются результатами, которые он покажет вам, если вы должны нажать enter.

Результаты поиска актуальны, если в ваш запрос включены соответствующие термины.

Предложения предполагают, что ваш запрос является неполным и поэтому сравнивает ваш запрос с другими запросами, чтобы угадать, что может быть завершена.

Когда я ищу "sher" на http://books.google.com, я вижу:

• Израильско-палестинские мирные переговоры, 1999-2001 гг.
• Помимо нейтралитета: перфекционизм и политика
• Desert
• Отказаться от выбора!: Используйте все свои интересы, страсти,...

Причиной этого является автор: в случае первых трех "Джордж Шер" и в случае с четвертой "Барбарой Шер". Это желаемое поведение, потому что, когда я ищу "sher" , я не хочу, чтобы результаты "Шерлока" хоронили "George Sher".

2. Решение

В Google есть своего рода API для своих предложений. Некоторые сведения об этом можно найти здесь. Более того, используя инструменты разработчика, вы можете точно видеть, что делает Google.

Использование инструментов разработчика: Осмотрите страницу https://books.google.com (CTRL + SHIFT + i в Chrome). Перейдите на вкладку сети и подождите, пока все будет загружено.

Когда вы начинаете вводить текст, Google запускает запросы на сервер, который вы увидите в списке. Когда я набрал "sher" , Google отправил этот запрос:

https://suggestqueries.google.com/complete/search?client=books&ds=bo&q=sher&callback=_callbacks_._1id33zyi5

Посмотрите на переменные:

client   = books
ds       = bo
q        = sher
callback = _callbacks_._1id33zyi5

• клиент определяет тип получаемого результата (XML [панель инструментов], JSON [firefox], JSONP [chrome])
• ds ограничивает поиск на определенном сайте (книги [bo], youtube [yt] и т.д.).
• q - это, конечно, текст запроса
• callback - это параметр, используемый для JSONP (который имеет некоторые важные отличия от JSON). Не беспокойтесь слишком много об этом, потому что jQuery может справиться с этим для вас.

Я собрал биты информации об этих параметрах, посмотрев этот запрос и прочитав this и this.

CORS:. Поскольку вы делаете запрос из домена, а не google.com, вы получите ошибку Access-Control-Allow-Origin. Это мера безопасности, пытающаяся предотвратить XSS. Чтобы обойти эту проблему, вам нужно будет использовать JSONP.

Используя jQuery, нам не нужно беспокоиться о обратном вызове, поэтому измените параметр клиента на chrome и используйте этот окончательный запрос:

https://suggestqueries.google.com/complete/search?client=chrome&ds=bo&q=sher

Рабочий пример ниже: В этом примере вам может потребоваться отметить ключ "google:suggestrelevance", который является дополнительным бонусом использования JSONP (Google только возвращает эту информацию в данных JSONP).

var requestUrl = "https://suggestqueries.google.com/complete/search?client=chrome&ds=bo&q=";
var xhr;

$(document).on("input", "#query", function () {
    typewatch(function () {
        // Here the bit that matters
        var queryTerm = $("#query").val();
        $("#indicator").show();
        if (xhr != null) xhr.abort();
        xhr = $.ajax({
            url: requestUrl + queryTerm,
            dataType: "jsonp",
            success: function (response) {
                $("#indicator").hide();
                $("#response").html(syntaxHighlight(response));
            }
        });
    }, 500);
});


/*
 *  --------- YOU ONLY NEED WHAT IS ABOVE THIS LINE ---------
 */
$(document).ready(function () {
    $("#indicator").hide();
});

// Just for fun, some syntax highlighting...
// Credit: http://stackoverflow.com/a/7220510/123415
function syntaxHighlight(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

// And automatic searching (when you stop typing)
// Credit: http://stackoverflow.com/a/2219966/123415
var typewatch = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

/* 
 * Safe to ignore:
 * This is just to make stuff look vaguely decent
 */
body {
  padding: 10px;
}
div * {
    vertical-align: top;
}
#indicator {
    display: inline-block;
    background: no-repeat center/100% url('http://galafrica.actstudio.ro/img/busy_indicator.gif');
    width: 17px;
    height: 17px;
    margin: 3px;
}
/*
 *
 * CREDIT:
 * http://stackoverflow.com/a/7220510/123415
 */
 pre {
    outline: 1px solid #ccc;
    padding: 5px;
}
.string {
    color: green;
}
.number {
    color: darkorange;
}
.boolean {
    color: blue;
}
.null {
    color: red;
}
.key {
    color: #008;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type=text id="query" placeholder="Start typing..." /><span id="indicator"></span>

</div>
<pre id="response"></pre>