<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #header_search_suggest{ position: absolute; width: calc(100% - 10px); left: 4px; border: solid 1px #ccc; background-color: white; text-align: left; z-index: 101; display: block; } #header_search_suggest li{ font-size: 14px; border-bottom: 1px solid #eeeeee; } #header_search_suggest li a{ padding:0.5em 1em; color:#333333; display: block; text-decoration: none; } #header_search_suggest li a:hover{ background-color: #EDF0F2; color:#2F7EC4; } #header_search_suggest li a em{ font-style: italic; color:#999; font-size:0.8em; } .btn{width: 7em;} </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="margin-top: 3em;"> <form method="post" action="/index.php/index/index/getsearch" id="header_search" class="form-inline"> <div class="form-group"> <label for="exampleInputName2">輸入搜索關鍵詞試試</label> <input type="text" class="form-control" id="keyword" name="keyword" value="" autocomplete="off" /> </div> <div class="form-group"> <input type="submit" value="搜索" class="btn btn-success"/> </div> </form> <ul id="header_search_suggest"></ul> </div> <!-- js部分，這部分控制，輸入框輸入時，進行及時提示的功能 --> <script> var xhr = null; $('#keyword').bind('input propertychange', function () { if (xhr) { xhr.abort();//如果存在ajax的請求，就放棄請求 } var inputText = $.trim(this.value); if (inputText != "") { //檢測鍵盤輸入的內容是否為空，為空就不發出請求 xhr = $.ajax({ type: 'POST', url: '/index.php/index/index/search',//注意這里輸入框輸入進行及時提示的方法與action方法不同 cache: false,//不從瀏覽器緩存中加載請求信息 // data: "keyword=" + inputText, data: {keyword: inputText}, dataType: 'json', success: function (json) { //console.log(json); json是返回的json數據 if (json.count != 0) { //檢測返回的結果是否為空 var lists = ""; // console.log(json[0]._source.title)；
//由於返回多條數據，進行each遍歷
$.each(json, function (index, obj) { //返回多條數據，index是第幾條，obj是內容 //處理高亮關鍵詞(這里是輸入關鍵詞自動出現的列表的樣式) console.log(json[index]._source.title); var searchContent = json[index]._source.title;//標題 var suggestItem = ''; if (searchContent.toLowerCase().indexOf(inputText.toLowerCase()) > -1) { var searchRegExp = new RegExp('(' + inputText + ')', "gi"); suggestItem = searchContent.replace(searchRegExp, ("<strong>$1</strong>")); } suggestItem = suggestItem + "<em> - " + json[index]._type + ' * ' + json[index]._id + "</em>"; //遍歷出每一條返回的數據 lists += "<li class='listName' ><a href='/index.php/index/index/search?id=" + json[index]._id + "&key=" + encodeURI(searchContent + ' - ' + json[index]._type) + "'>" + suggestItem + "</a></li>"; }); $("#header_search_suggest").html(lists).show();//將搜索到的結果展示出來 } else { $("#header_search_suggest").hide(); } //記錄搜索歷史記錄 $.post('/index.php/index/index/savesearchlog',{keyword: inputText,count: json.count}); } }); } else { $("#header_search_suggest").hide();//沒有查詢結果就隱藏搜索框 } }).blur(function () { setTimeout('$("#header_search_suggest").hide()',500);//輸入框失去焦點的時候就隱藏搜索框，為了防止隱藏過快無法點擊，設置延遲0.5秒隱藏 }); </script> </body> </html>
以上是html部分，下面是php部分
public function getsearch(){ //這個方法是表單點擊搜索時action提交的方法 $client = ClientBuilder::create()->build(); $keys = Request::instance()->param('keyword'); $keys = $keys ? $keys : '測試'; $params = [ 'index' => 'article_index', 'type' => 'article_type', 'body' => [ 'query' => [ 'match' => [ 'content' => $keys ] ] ] ]; $response = $client->search($params); $str = ''; $list = $response['hits']['hits']; //pp($list);die; $str .= '<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>'; $str .= '<table class="table table-hover"> <thead> <tr> <th>id</th> <th>title</th> <th>content</th> </tr> </thead> <tbody>'; foreach ($list as $k => $v) { $str .= '<tr><td>' . $v['_source']['id'] . '</td><td>' . $v['_source']['title'] . '</td><td>' . $v['_source']['content'] . '</td></tr>'; } $str .='</tbody></table>'; return $str; } public function search() { //這部分方法是ajax 在搜索框輸入文字時進行提示的方法 /*$client = ClientBuilder::create()->setHosts($hosts)->build();*/ //實例化es類；在項目中引入自動加載文件，並且實例化一個客戶端： $client = ClientBuilder::create()->build(); $keys = Request::instance()->param('keyword');//tp5方法，獲取get post數據自動辨別 $keys = $keys ? $keys : '6'; $params = [ 'index' => 'article_index', 'type' => 'article_type', 'body' => [ 'query' => [ 'match' => [ 'content' => $keys ] ] ] ]; $response = $client->search($params); return json($response['hits']['hits']); //pp($response['hits']['hits']); die; }
最終效果
