1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7. #header_search_suggest{
  8.     position: absolute;
  9.     width: calc(100% - 10px);
  10.     left: 4px;
  11.     border: solid 1px #ccc;
  12.     background-color: white;
  13.     text-align: left;
  14.     z-index: 101;
  15.     display: block;
  16. }
  17. #header_search_suggest li{
  18.     font-size: 14px;
  19.     border-bottom: 1px solid #eeeeee;
  20. }
  21. #header_search_suggest li a{
  22.     padding:0.5em 1em;
  23.     color:#333333;
  24.     display: block;
  25.     text-decoration: none;
  26. }
  27. #header_search_suggest li a:hover{
  28.     background-color: #EDF0F2;
  29.     color:#2F7EC4;
  30. }
  31. #header_search_suggest li a em{
  32.     font-style: italic;
  33.     color:#999;
  34.     font-size:0.8em;
  35. }
  36. .btn{width: 7em;}
  37.  
  38.     </style>
  39.  
  40. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  41. <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  42. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  43. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  44. <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  45.  
  46. </head>
  47. <body>
  48.  
  49. <div  class="container" style="margin-top: 3em;">
  50.  
  51.     <form method="post" action="/index.php/index/index/getsearch" id="header_search" class="form-inline">
  52.         <div class="form-group">
  53.            <label for="exampleInputName2">输入搜索关键词试试</label>
  54.            <input type="text" class="form-control" id="keyword" name="keyword" value="" autocomplete="off" />
  55.         </div>
  56.         <div class="form-group">
  57.             <input type="submit" value="搜索"  class="btn btn-success"/>
  58.         </div>
  59.  
  60.     </form>
  61.     <ul id="header_search_suggest"></ul>
  62.  
  63. </div>
  64.  
  65. <!--  js部分，这部分控制，输入框输入时，进行及时提示的功能  -->
  66. <script>
  67. var xhr = null;
  68. $('#keyword').bind('input propertychange', function () {
  69.     if (xhr) {
  70.         xhr.abort();//如果存在ajax的请求，就放弃请求
  71.     }
  72.     var inputText = $.trim(this.value);
  73.     if (inputText != "") { //检测键盘输入的内容是否为空，为空就不发出请求
  74.         xhr = $.ajax({
  75.             type: 'POST',
  76.             url: '/index.php/index/index/search',//注意这里输入框输入进行及时提示的方法与action方法不同
  77.             cache: false,//不从浏览器缓存中加载请求信息
  78.             // data: "keyword=" + inputText,
  79.             data: {keyword: inputText},
  80.             dataType: 'json',
  81.             success: function (json) {
  82.                 //console.log(json);  json是返回的json数据
  83.                 if (json.count != 0) {
  84.                     //检测返回的结果是否为空
  85.                     var lists = "";
  86.                    // console.log(json[0]._source.title)；
    　　　　　　　　　　　　//由于返回多条数据，进行each遍历
  87.                     $.each(json, function (index, obj) {
  88. 　　　　　　　　　　　　　　//返回多条数据，index是第几条，obj是内容
  89.                         //处理高亮关键词(这里是输入关键词自动出现的列表的样式)
  90.                         console.log(json[index]._source.title);
  91.                         var searchContent = json[index]._source.title;//标题
  92.                         var suggestItem = '';
  93.                         if (searchContent.toLowerCase().indexOf(inputText.toLowerCase()) > -1) {
  94.                             var searchRegExp = new RegExp('(' + inputText + ')', "gi");
  95.                             suggestItem = searchContent.replace(searchRegExp, ("<strong>$1</strong>"));
  96.                         }
  97.                         suggestItem = suggestItem + "<em> - " + json[index]._type + ' * ' + json[index]._id + "</em>";
  98.                         //遍历出每一条返回的数据
  99.                         lists += "<li class='listName' ><a href='/index.php/index/index/search?id=" + json[index]._id + "&key=" + encodeURI(searchContent + ' - ' + json[index]._type) + "'>" + suggestItem + "</a></li>";
  100.                     });
  101.  
  102.                     $("#header_search_suggest").html(lists).show();//将搜索到的结果展示出来
  103.                 } else {
  104.                     $("#header_search_suggest").hide();
  105.                 }
  106.                 //记录搜索历史记录
  107.                 $.post('/index.php/index/index/savesearchlog',{keyword: inputText,count: json.count});
  108.             }
  109.         });
  110.     } else {
  111.         $("#header_search_suggest").hide();//没有查询结果就隐藏搜索框
  112.     }
  113. }).blur(function () {
  114.     setTimeout('$("#header_search_suggest").hide()',500);//输入框失去焦点的时候就隐藏搜索框，为了防止隐藏过快无法点击，设置延迟0.5秒隐藏
  115. });
  116. </script>
  117.  
  118. </body>
  119. </html>

以上是html部分，下面是php部分

  1.  public function getsearch(){
  2. //这个方法是表单点击搜索时action提交的方法
  3.         $client = ClientBuilder::create()->build();
  4.         $keys = Request::instance()->param('keyword');
  5.         $keys = $keys ? $keys : '测试';
  6.         $params = [
  7.             'index' => 'article_index',
  8.             'type' => 'article_type',
  9.             'body' => [
  10.                 'query' => [
  11.                     'match' => [
  12.                         'content' => $keys
  13.                     ]
  14.                 ]
  15.             ]
  16.         ];
  17.         $response = $client->search($params);
  18.         $str = '';
  19.         $list = $response['hits']['hits'];
  20.         //pp($list);die;
  21.         $str .= '<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  22.                 <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  23.                 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  24.                 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  25.                 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>';
  26.  
  27.         $str .= '<table class="table table-hover">
  28.                   <thead>
  29.                     <tr>
  30.                       <th>id</th>
  31.                       <th>title</th>
  32.                       <th>content</th>
  33.                     </tr>
  34.                   </thead>
  35.                   <tbody>';
  36.  
  37.         foreach ($list as $k => $v) {
  38.             $str .= '<tr><td>' . $v['_source']['id'] . '</td><td>' . $v['_source']['title'] . '</td><td>' . $v['_source']['content'] . '</td></tr>';
  39.         }
  40.         $str .='</tbody></table>';
  41.         return $str;
  42.  
  43.     }
  44.  
  45.     public function search() {
  46. //这部分方法是ajax 在搜索框输入文字时进行提示的方法
  47.         /*$client = ClientBuilder::create()->setHosts($hosts)->build();*/
  48.         //实例化es类；在项目中引入自动加载文件，并且实例化一个客户端：
  49.         $client = ClientBuilder::create()->build();
  50.  
  51.         $keys = Request::instance()->param('keyword');//tp5方法，获取get post数据自动辨别
  52.         $keys = $keys ? $keys : '6';
  53.         $params = [
  54.             'index' => 'article_index',
  55.             'type' => 'article_type',
  56.             'body' => [
  57.                 'query' => [
  58.                     'match' => [
  59.                         'content' => $keys
  60.                     ]
  61.                 ]
  62.             ]
  63.         ];
  64.         $response = $client->search($params);
  65.          return json($response['hits']['hits']);
  66.         //pp($response['hits']['hits']);
  67.         die;
  68. }

最终效果

使用ElasticSearch实现搜索时即时提示与全文搜索功能的更多相关文章

  1. 使用ElasticSearch服务从MySQL同步数据实现搜索即时提示与全文搜索功能

    最近用了几天时间为公司项目集成了全文搜索引擎,项目初步目标是用于搜索框的即时提示.数据需要从MySQL中同步过来,因为数据不小,因此需要考虑初次同步后进行持续的增量同步.这里用到的开源服务就是Elas ...

  2. ElasticSearch 2 (14) - 深入搜索系列之全文搜索

    ElasticSearch 2 (14) - 深入搜索系列之全文搜索 摘要 在看过结构化搜索之后,我们看看怎样在全文字段中查找相关度最高的文档. 全文搜索两个最重要的方面是: 相关(relevance ...

  3. MySQL全文搜索

    http://www.yiibai.com/mysql/full-text-search.html 在本节中,您将学习如何使用MySQL全文搜索功能. MySQL全文搜索提供了一种实现各种高级搜索技术 ...

  4. VuePress 博客优化之开启 Algolia 全文搜索

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 由于 V ...

  5. jquery+php实现用户输入搜索内容时自动提示

    index.html <html> <head>     <meta charset=;} #search_auto li a:hover{background:#D8D ...

  6. Elasticsearch是一个分布式可扩展的实时搜索和分析引擎,elasticsearch安装配置及中文分词

    http://fuxiaopang.gitbooks.io/learnelasticsearch/content/  (中文) 在Elasticsearch中,文档术语一种类型(type),各种各样的 ...

  7. Ternary Search Tree 应用--搜索框智能提示

    前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...

  8. 发掘ListBox的潜力（三）：显示即时提示（Tips）

    ListBox显示即时提示(Tips) Listbox内容太长时超出Listbox宽度的部分将无法显示,一种解决方法是让Listbox产生横向滚动条,滚动显示内容(见前面的<发掘ListBox的 ...

  9. 全文搜索之 Elasticsearch

    概述 Elasticsearch (ES)是一个基于 Lucene 的开源搜索引擎,它不但稳定.可靠.快速,而且也具有良好的水平扩展能力,是专门为分布式环境设计的. 特性 安装方便:没有其他依赖,下载 ...

随机推荐

  1. C# 微信公众号开发--准备工作

    前言 最初打算熟悉下微信开发打算用node.js开发,结果底气不足先用C#开发,先踩了踩坑. 准备工作 微信公众平台开发者文档. 这个先多看几遍. 测试公众号,申请开通后会看到微信号,appID,ap ...

  2. 小白Python路上第一个难点，也是一个比较重要的点（闭包，迭代器，生成器）

    一.闭包 闭包就是在内层函数中引用外层函数的变量 作用:1.保护变量不受侵害          2.让一个变量永驻内存 二.迭代器 Iterator:迭代器,包含_iter_()和_next_()函数 ...

  3. dotnet core 编程规范

    本文实际只是翻译 .NET Core foundational libraries 官方文档的编码风格 在 .NET Core foundational libraries项目使用的编程规范默认就是 ...

  4. 【Java并发编程】21、线程池ThreadPoolExecutor源码解析

    一.前言 JUC这部分还有线程池这一块没有分析,需要抓紧时间分析,下面开始ThreadPoolExecutor,其是线程池的基础,分析完了这个类会简化之后的分析,线程池可以解决两个不同问题:由于减少了 ...

  5. 【Java深入研究】2、JDK 1.8 LinkedList源码解析

    LinkedList是一个实现了List接口和Deque接口的双端链表. 有关索引的操作可能从链表头开始遍历到链表尾部,也可能从尾部遍历到链表头部,这取决于看索引更靠近哪一端. LinkedList不 ...

  6. blfs（systemv版本）学习笔记-制作一个简单的桌面系统

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 大概思路: lfs(系统)+xorg(驱动)+i3-wm(窗口+桌面)+lightdm(显示管理器+登录管理器) 链接: lfs ...

  7. 透明度 rgba 和 opacity 的区别

    rgba: 使用方式:rgba(255, 255, 255, .5) 最后一个参数表示透明度取值范围 0 ~1    只作用于元素的颜色或其背景色. opacity :  使用方式:opacity : ...

  8. SQL Server: create table sql script

    ---摇奖observeh数据库设计 Function getSpace lottery /* -- Author:geovindu 涂聚文 -- Date: 20180427 为了自写生成代码.根据 ...

  9. redis 集群搭建

    1.redis 集群 redis集群是一个无中心的分布式redis存储架构,可以在多个节点之间进行数据共享,解决了redis高可用.可扩展等问题,redis集群提供了以下两个好处 1.将数据自动切分( ...

  10. 修改 this 指向

    封装函数 f,使 f 的 this 指向指定的对象 function bindThis(f, oTarget) { if(f.bind){ return f.bind(oTarget); }else{ ...