2016-05-25 10 views
0

私は自動提案機能を備えた私のウェブサイトの検索バーに取り組んでいます。私はphp、ajax、jquery、およびmysqlを使ってこれを実装しました。自動提案モジュール

今結果をリンクとして表示する必要があります。ユーザーが結果をクリックすると、そのページにユーザーがリダイレクトされます。

私もこの形式で検索結果をしたい:

私のコードは次のとおりです。

のindex.php

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Autocomplete textbox using jQuery, PHP and MySQL by CodexWorld</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#skills").autocomplete({ 
     source: 'search.php' 
    }); 
    }); 
    </script> 
</head> 
<body> 

<div class="ui-widget"> 
    <label for="skills">Skills: </label> 
    <input id="skills" autofocus=""> 
</div> 
</body> 
</html> 

search.php

<?php 
$dbHost = 'localhost'; 
$dbUsername = 'root'; 
$dbPassword = ''; 
$dbName = 'search_demo'; 
//connect with the database 
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName); 
//get search term 
$searchTerm = $_GET['term']; 
//get matched data from skills table 
$query = $db->query("SELECT skill,category FROM skills WHERE skill LIKE '%".$searchTerm."%' ORDER BY skill ASC"); 
while ($row = $query->fetch_assoc()) { 
    $data[] = $row['skill']; 
} 
//return json data 
$var = json_encode($data); 
echo $var; 
?> 

私のデータベースには、id,skill、およびcategoryという3つのフィールドがあります。

現在の結果は次のとおりです。

答えて

0

あなたは2つのオプションがあります。最初はextend the jqueryUI autocomplete widgetになり、widgets factoryとなります。 2つ目は、あなた自身のオートコンプリートスクリプトを作成することです。これは、実際には単純で学習に適しています。

関連する問題