Вот как я бы решил эту проблему, используя PHP и JavaScript.
Сначала вам нужно будет настроить серверный ресурс для обслуживания результатов поиска, в идеале в json.
Если выЕсли вы хотите сделать это правильно, посмотрите этот превосходный учебник по созданию REST API с PHP (похоже, что вы используете технологию на стороне сервера).
Если вы хотитебыстро взломайте что-нибудь вместе, что может быть не так надежно, вот как это делается:
Сначала создайте файл php в заданном месте, скажем, /api/search/search.php
Это должно выглядетьчто-то вроде этого:
<?php
// connect to mysql
if($_GET['q']) {
$q = $_GET['q'];
echo json_encode(getResults($q));
} else {
echo "No results";
}
function getResults ($q) {
$sql = "SELECT * FROM whatever WHERE whichever LIKE '%'+"+$q+"+'%'"
//mysql_fetch_results ...
// loop through returned result set, create an associative array of results
// i.e. $results = array("items" => array ( array ("link" => "#", "title" ="title"), array ("link" => "#", "title" ="title"), array ("link" => "#", "title" ="title") ))
return $results;
}
?>
Это вернет результаты в формате json, когда вы выполните запрос GET в /api/search/search.php?q=Ваш запрос здесь
Вам понадобятся некоторыекод на стороне клиента для вечеринки с сервером.Основной подход состоит в том, чтобы настроить поле ввода и при каждом изменении значения использовать методы AJAX jQuery (здесь хорошо подойдет $ .getJSON, но вы также можете использовать $ .GET или $ .AJAX), чтобы отправить запрос сПараметр q равен запросу пользователя.Затем вы присоединяете функцию обратного вызова, которая запускается после завершения запроса, которая анализирует результаты и выводит их на страницу.Пример ниже.
$(document).ready(function () {
// This is your datasource url. Change this to be the resource you want
var url = "https://www.googleapis.com/customsearch/v1?key=INSERT-YOUR-KEY&cx=013036536707430787589:_pqjad5hr1a&alt=json";
// Attach a function to the keypress event for the input #q
$("q").keypress(function () {
// Get the value of the input
var q = $(this).val();
// Append the query to the end of the url
url += "&q=" + q;
// Make an ajax request to the api, and bind a function as a callback for when the request is complete
$.getJSON(url, function (response) {
// Store the items object. These are your results
var results = response.items;
var resultList = $(buildList(results));
$("#results").empty().append(resultList);
});
function buildList (results) {
// Initialize a string to hold the html formatted results
var htmlStr = "<ul>";
results.each(function () {
var result = $(this);
// Append the result's properties to your html
htmlStr += "<li><a href='"+result.link+"'>";
htmlStr += result.title;
htmlStr += "</a></li>";
});
htmlStr += "</ul>";
return htmlStr;
}
});
});
Вот разметка:
<input id="q" type="text" />
<div id="results"></div>
Удачи