百度搜索自动提示搜索相关内容----模拟实现
最近做项目,在和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 啊。。。。
不要忘记创建一般处理程式。
控件前端代码:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication23.WebUserControl1" %>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<style type="text/css">.mouseover{background-color: gray;}</style>
<div class="row" id="wrapdiv"><asp:TextBox runat="server" ID="txtInput" Width="150px" EnableViewState="false"></asp:TextBox></div>
<div style=" background-color:white; "><p>测试测试测试</p>
</div>
<script type="text/javascript">$(function () {var $txtinput = $("#<%=txtInput.ClientID %>");var $NumberHandle;//生执行的事件时间的句柄。//创建一个divvar $div = $("<div style='border:solid 1px gray;z-index:1; position:absolute;background-color:white; padding:0 0;'></div>");$div.appendTo($("#wrapdiv"));//创建一个ulvar $ul = $("<ul style='list-style-type:none;cursor:pointer; text-align:left; padding:0 0; list-style-position:hanging;'></ul>");//将此$ul添加到$div中去$div.append($ul);//将此$div显示在$inputTxt下面位置var $txtinputlocation = $txtinput.offset();//设置$div的位置及宽度var $divObj = new Object();$divObj.Top = $txtinputlocation.top + $txtinput.outerHeight();$divObj.left = $txtinputlocation.left;var $divOuterWidth = $txtinput.outerWidth();$div.offset($divObj);$div.width(parseInt($divOuterWidth) - 2);$div.hide();$txtinput.keyup(function () {$div.slideDown("slow");$NumberHandle = setTimeout(auoTip("Handler1.ashx"), 30000);//设置下拉样式。 });function auoTip(url) {$.getJSON(url, { "inputValue": $txtinput.val() }, function (data) {//清除以前绑定的数据$("ul li").each(function (index, element) {$(element).remove();});//to-do 写下后台数据绑定的代码var $li = $(("<li style='margin: 1px 0px;'>" + data + "<li>").replace($txtinput.val(), "<em><b>" + $txtinput.val() + "</b></em>"));$ul.append($li);//为li便签添加鼠标和点击事件$("ul li").each(function (index, element) {$(element).mouseover(function () {$(this).addClass("mouseover");});$(element).mouseleave(function () {$(this).removeClass("mouseover");});$(element).bind("click", null, function () {$txtinput.val($(this).text().replace("<em><b>" + $txtinput.val() + "</b></em>", $txtinput.val()));$div.slideUp("show");});});});}$txtinput.keypress(function () {clearTimeout($NumberHandle);});});</script>
User控件后端代码:
其实什么都没哟写,都是Microsoft 创建的。看下吧
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace WebApplication23
{public partial class WebUserControl1 : System.Web.UI.UserControl{protected void Page_Load(object sender, EventArgs e){}}
}
看一般处理程式的代码:
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;}}}
}
这里只是模拟,你可以把操作数据的代码放到这里面来。
好了,准备工作已经做完了,现在应该使用我们自己创建的代码了。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication23._Default" %><%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body><form id="form1" runat="server"><div><uc1:WebUserControl1 runat="server" id="WebUserControl1" /></div></form>
</body>
</html>
最后一步,也是关键的一步,一定不要忘记运行啊,不然你怎么知道效果。。。。呢。
转载于:https://www.cnblogs.com/fandong90/p/5426967.html
百度搜索自动提示搜索相关内容----模拟实现相关推荐
- 搜索引擎下拉html,Vue实现百度下拉提示搜索功能
一.前期准备 网上大神已经做过这个功能https://github.com/lavyun/vue-demo-search 这自己仅实现搜索功能 为了使用百度实现搜索功能,首先搞清楚下拉数据和搜索功能的 ...
- Vue实现百度下拉提示搜索
一.前期准备 网上大神已经做过这个功能https://github.com/lavyun/vue-demo-search 这自己仅实现搜索功能 为了使用百度实现搜索功能,首先搞清楚下拉数据和搜索功能的 ...
- 一个通用的ajax程序(实现像百度一样自动提示功能)
1.jsp+javabean实现ajax (1),<script type="text/javascript"> String.prototype.trim=funct ...
- php和js搜索框,利用PHP+JS实现搜索自动提示(实例)_php技巧
我觉得我有必要写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告诉你它是如何工作的以及为什么这样做.而知道这些可以让你对这个插件可以进一步的按 ...
- vue 实现百度下拉提示搜索功能
一.概述 使用百度实现搜索功能,先来看一下效果图 二.代码实现 安装插件vue-resource npm install vue-resource --save 这个插件主要是为了实现this.$ht ...
- ajax的leiku,AJAX实现汉字和拼音搜索自动提示的效果(asp.net)
实现该功能用到了两个页面,一个请求显示的页面(你可以使用的静态页面),一个用于获取关键字到数据表中模糊查询并获取满足条件的数据输出.这里的搜索提示实际上是用div来实现的,C#代码很简单,关键是看明白 ...
- java Trie实现英文单词查找树 搜索自动提示
原理解释文章:https://blog.csdn.net/beiyetengqing/article/details/7856113 代码应用: wordTrie.txt(工具类): package ...
- 原生H5 select自动提示搜索
生产线:<select id="productLineId" name="productLineId"><option value=" ...
- python怎么输入代码-python中如何设置代码自动提示
第一步:打开pycharm,如下图所示: 第二步:File→Power Save Mode,把下面如图所示的勾去掉: 第三步:去掉勾后,不再使用省电模式,新建一个 python文件,输入需要输入的单词 ...
最新文章
- [*开同*看] 星际情书
- 学密码学一定得学程序
- 怎样保护计算机连接线,一根网线把电脑烧了:雷雨天如何保护家电?
- Cheapest Palindrome POJ - 3280(动态规划*)
- 如何下载anaconda python3.7_如何安装Anaconda和Python
- POJ 1873 The Fortified Forest(凸包)题解
- PHP截取中文字符串的方法
- 彻底搞懂“红黑树”......
- 为什么要避免大事务以及大事务如何解决?
- SpringMVC文件下载IOException: UT010029: Stream is closed
- 制作WIN_XP无人值守光盘
- web前端顶岗实习总结报告_实习报告-web前端实习报告范文三篇 精品
- 好用的三维绘图软件CREO绘制椭圆
- [Pandas] 数据形状df.shape
- Intel有那些45纳米的CPU
- 谷歌chrome安卓版_谷歌Chrome安卓版测试全新共享界面:二维码和截图来了
- 9寸触屏 电影中曝光诺基亚首款平板Z500
- bcd 初始化库系统卷失败_U盘多系统启动制作教程 教你做多U盘系统启动盘
- 华为HCIP-DATACOM题库解析161-190(821)
- 牛客竞赛每日俩题 - Day4
热门文章
- python工作招聘-爬了招聘网站之后,给你几点学习Python的建议
- python小程序-python学习—几个简单小程序
- python大数据分析实例-用Python整合的大数据分析实例
- python填写excel-Python|读、写Excel文件(三种模块三种方式)
- python需要多久-在传智播客培训python需要多久?
- 学会python编程容易吗-Python编程入门难不难
- python基础语法有哪些-python基本语法有哪些?
- python结果输出到excel-python实现数据导出到excel的示例--普通格式
- python常用函数-python常用函数与用法示例
- python装饰器原理-Python装饰器原理