受欢迎的博客标签

Elasticsearch-集成百度搜索自动提示搜索相关内容----自定义实现和百度代码实现

Published

思路

     1》 首先必须有个输入框<input>

     2》 把输入的内容ajax到后台。(我使用的一般处理程式接收前台的数据)(jquery)

     3》 把数据显示在一个DIV框中

     4》点击选择数据放到Input中,在然后提交。(submit)

       
 
最近做项目,在和user 洽谈时,在输内容时提示数据库已存在的相似内容,也就是模糊匹配。怎么实现这个功能呢?

       当然现在软件开发都是讲究高效,开发周期短,第一个想的是又没相似的控件可以实现这种效果,在搜索的时候,发现百度搜、google搜不是正是我需要的效果的吗?本着专业的思想,按下了F12。

     发现了这个:

    

想去百度的同学,抓紧了,我也要赶紧准备准备了。。。

1 <span class="bg s_ipt_wr"><input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off"></span><span class="bg s_btn_wr"><input type="submit" id="su" value="百度一下"/>

 看到这我比较懒,不愿意在找相应的js了,自己写吧。

 本人是做Asp.net 开发的,无奈国内很少有大公司招.net.(伤心啊)

 我的思路是这样的。

     1》 首先必须有个输入框<input>

     2》 把输入的内容ajax到后台。(我使用的一般处理程式接收前台的数据)(jquery)

     3》 把数据显示在一个DIV框中

     4》点击选择数据放到Input中,在然后提交。(submit)

     看我做的效果图:

        

          好看吧,其实。。。,效果是这样的

          

         希望大家要学好CSS  啊。。。。

 

    

 不要忘记创建一般处理程式。

      控件前端代码:

      

   User控件后端代码:

    其实什么都没哟写,都是Microsoft 创建的。看下吧

     

看一般处理程式的代码:

     

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace WebApplication23
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string value = context.Request.Params["inputValue"].ToString()+"ooo";
 
            JavaScriptSerializer js = new JavaScriptSerializer();
            string Jsonvalue = js.Serialize(value);
            context.Response.Write(Jsonvalue);
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

这里只是模拟,你可以把操作数据的代码放到这里面来。

     好了,准备工作已经做完了,现在应该使用我们自己创建的代码了。

      

引用百度的其实很简单:

1. 先引用js
<script charset="gbk" type="text/javascript" src="http://www.baidu.com/js/opensug.js"></script>

2. input标签中加入 baiduSug="1"
<input id="input-text" class="input-text" name="q" type="text" placeholder="呆木瓜:好用的文件搜索引擎" value="" baiduSug="1" />

https://www.opensug.org/

https://opensug.github.io/js/