jQuery仿百度搜索引擎

最新推荐文章于 2022-11-10 08:41:32 发布
最新推荐文章于 2022-11-10 08:41:32 发布
阅读量425 收藏 1
点赞数
文章标签： jquery
原文链接：https://www.jq22.com/jquery-info23998
版权

项目效果

在这里插入图片描述

在这里插入图片描述

代码

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/searchEngine.css" />
	</head>
	<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
	<script src="js/searchEngine.js"></script>
	<script src="js/ajaxPackInfo.js"></script>
	<style>
		html,body {
			
			height: 100%;
		}
		.search{
			min-width: 300px;
		}
	</style>
	<body>
		<input type="text" name="search" id="search"/>
		<br/>
		这是搜索引擎<br/>
		引擎数据有：["中国工商", "中国工商银行", "中国建设银行", "中国工商局", "中国银行", "中国工人", "中国大集团",
						"中国华为","abcd","efgh","igklmn","opqrst","uvwsyz"
					]
		<!-- <div class="search">
			<div class="search-input">
				<input type="text" />
			</div>
			<div class="search-show">
				<ul>
					<li>xxx</li>
					<li>xxx</li>
				</ul>
			</div>
		</div> -->

		<script>
			$(function() {
				$("#search").initSearch({placeholder:"请输入中国"});
			});
		</script>
	</body>
</html>

searchEngine.css

.search{
	position: relative;
	min-width: 150px;
}
input:focus{ outline: none; }
.search-input{
	width: 100%;
	border: 2px solid #c4c7ce;
	box-sizing: border-box;
	padding: 5px 10px 5px 10px;
	border-radius: 10px 10px 10px 10px;
	background-color: white;
}
.search-input>input{
	width: 100%;
	height: 25px;
	border: none;
	font-size: 16px;
}
.search-show{
	position: absolute;
	left: 0px;
	z-index: 999;
	width: 100%;
	min-height: 50px;
	box-sizing: border-box;
	padding: 10px 10px 0px 10px;
	background-color: white;
	display: none;
}
.search-show>ul{
	padding: 0px;
	margin: 0px;
	list-style: none;
	font-size: 16px;
}
.search-show>ul>li{
	height: 30px;
	display: flex;
	align-items: center;
}
.search-show>ul>li:hover{
	color: #4e71f2;
}

ajaxPackInfo.js

const L_AJAX=$.extend({
    //ajax封装
    ajaxPack : function(obj,callback,errCallback){
        $.ajax({
            type: obj.type,
            url: `${obj.url}`,
            data: obj.param,
            dataType: "json",
            contentType: 'application/json;charset=utf-8',
            success : function (res) {
                L_AJAX.ajaxResultReduction(res,callback,errCallback);
            },
            error : function(response, ajaxOptions, thrownError){
                const res={
                    code:500,
                    message:"失败",
                    data:"请求发送错误，请检查网络或联系管理员！",
                };
                L_AJAX.ajaxResultReduction(res,callback,errCallback);
            },
        });
    },

    //ajax结果处理
    ajaxResultReduction : function(res,callback,errCallback){
        let resData=res;
        if (resData.code==undefined){
             resData={
                code:res==null ? 500 : 200,
                data:res==null ? "没有查到数据" :res,
                message: res==null ? "失败:" : "成功",
            };
        }
        L_AJAX.ifAjaxResErr(resData,callback,errCallback);
    },

    //请求结果成功错误返回
    ifAjaxResErr : function (res,callback,errCallback) {
        if (res.code==200){
            callback(res);
        }else {
           let errInfo=res.message+":"+res.data;
            errCallback(res,errInfo);
        }
    }
});

searchEngine.js

(($) => {
	//默认参数
	let defaults = {
		width: "200px",
		height: "35px",
		inpBorderSize: "2px",
		inpBorderColor: "#EEEEEE",
		borderSize: "2px",
		borderColor: "red", //#4e71f2
		placeholder: "搜索",
		borderRadius:"10px",
		static: true,
		paramData: {}
	};
	let settings = null;
	$.fn.extend({
		//初始化
		initSearch(options) {
			if (options != null && options != "") {
				settings = $.extend(defaults, options);
			} else {
				settings = defaults;
			}

			//隐藏原来的输入框
			$(this).css("display", "none");

			//获取原来的输入框的id name
			let inpId = $(this).attr("id");
			let inpName = $(this).attr("name");

			//创建新的输入框
			let input = `<div class="search">
							<div class="search-input">
								<input type="text" id="inp_${inpId}" name="${name}" placeholder="${settings.placeholder}"/>
							</div>
							<div class="search-show div_${inpId}">
								<ul id="ul_${inpId}"></ul>
							</div>
						</div>`;

			//在原来的输入框后面添加新的输入框
			$(this).after(input);

			/* $(`#inp_${inpId}`).css({
				"border-bottom": `${settings.inpBorderSize} solid ${settings.inpborderColor}`,
			}); 

			$(`#inp_${inpId}`).parent().parent().css({
				"min-width": settings.width,
				"border": `${settings.borderSize} solid ${settings.borderColor}`,
			});*/
		
			$(`#inp_${inpId}`).focus(function() {
				$(this).css("border-bottom",
					`${settings.inpBorderSize} solid ${settings.inpBorderColor}`);
					
				$(this).parent().css({
					"border": `${settings.borderSize} solid ${settings.borderColor}`,
					"border-bottom" : "none",
					"border-radius" : `${settings.borderRadius} ${settings.borderRadius} 0px 0px`
				})
				$(this).parent().next().css({
					"display": "block",
					"border": `${settings.borderSize} solid ${settings.borderColor}`,
					"border-top" : "none",
					"border-radius": `0px 0px ${settings.borderRadius} ${settings.borderRadius}`
				});
			});
			
			$(`#inp_${inpId}`).blur(function() {
				$(this).css("border-bottom", "none");
				$(this).parent().css({
					"border": `${settings.borderSize} solid #c4c7ce`,
					"border-radius" : `${settings.borderRadius} ${settings.borderRadius} ${settings.borderRadius} ${settings.borderRadius}`
				})
				
				$(`#ul_${inpId}`).find("li").remove();
				$(this).parent().next().css({
					"display": "none",
					"border": `${settings.borderSize} solid #c4c7ce`,
					"border-top" : "none",
					"border-radius": "0px 0px 0px 0px"
				});
				//$(this).parent().next().css("display", "none");
			});
			
			//注册input 输入监听事件
			$(`#inp_${inpId}`).bind('input propertychange', function() {
				$(`#${inpId}`).val($(`#inp_${inpId}`).val());
				$(`#ul_${inpId}`).find("li").remove();
				if (settings.static) {
					let arr = ["中国工商", "中国工商银行", "中国建设银行", "中国工商局", "中国银行", "中国工人", "中国大集团",
						"中国华为","abcd","efgh","igklmn","opqrst","uvwsyz"
					];
					let val = $(`#inp_${inpId}`).val();
					let len = val.length;

					for (let item of arr) {
						if (item.length >= len && $(`#ul_${inpId}`).find("li").length < 6) {
							let text = item.substring(-1, len);
							let valtext = val.substring(-1, len);
							if (text == valtext) {
								$(`#ul_${inpId}`).append(`
													<li style="cursor: pointer">${item}</li>
												`);
							}
						}
					}
					$(`.div_${inpId}`).css("display", "block");
					//注册li 点击事件
					$(`#ul_${inpId}>li`).mousedown(function(event) {
						let spanText = $(this).html();
						$(`#inp_${inpId}`).val(spanText);
						$(`#${inpId}`).val(spanText);
						$(`.div_${inpId}`).css("display", "none");
						event.stopPropagation(); //  阻止事件冒泡
					});
					$(`#ul_${inpId}>li`).hover(function() {
						$(this).css("color", settings.borderColor);
					}, function() {
						$(this).css("color", "black");
					});
				} else {
					let val = $(`#inp_${inpId}`).val();
					settings.paramData.callback(val);
					L_AJAX.ajaxPack(settings.paramData.param, res => {
						let data = res.data;
						for (let item of data) {
							$(`#ul_${inpId}`).append(`
												<li style="cursor: pointer">${item}</li>
											`);
						}
						$(`.div_${inpId}`).css("display", "block");
						//注册li 点击事件
						$(`#ul_${inpId}>li`).mousedown(function(event) {
							let spanText = $(this).html();
							//console.log(spanText);
							$(`#inp_${inpId}`).val(spanText);
							$(`#${inpId}`).val(spanText);
							$(`.div_${inpId}`).css("display", "none");
							event.stopPropagation(); //  阻止事件冒泡
						});
						$(`#ul_${inpId}>li`).hover(function() {
							$(this).css("color", settings.borderColor);
						}, function() {
							$(this).css("color", "black");
						});
						settings.paramData.succeedCallBack(res);
					}, (res, errInfo) => {
						settings.paramData.errCallBack(res, errInfo);
					})
				}
				
			});
		}
	});
})(jQuery);

转载于：https://www.jq22.com/jquery-info23998

JieFighting
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery仿 百度搜索
12-02
模仿百度搜索自动匹配合适的内容,传递json数据，交互方便
js/jQuery实现类似百度搜索功能
weixin_30642029的博客
04-22 463
一、页面代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>js/jQuery实现类似百度搜索功能</title><meta n...
JQuery插件【仿百度搜索 智能感知效果】
zhanglan478950的专栏
05-08 4317
$(function () { var array = ['asp.net', 'asp.net mvc', 'wcf', 'wpf', 'win8', 'windows phone', '张东', '张熙', '张亚飞']; $('#txtKey').autocomplete(array).result(function (event, data)
jQuery插件：一个仿百度搜索分页插件
xxpr_ybgg的博客
11-10 152
jQuery插件：一个仿百度搜索分页插件，风格可以自己设置，推荐使用bootstrap配合使用。
Jquery 仿百度搜索引擎自动完成功能
12-22
仿百度搜索引擎自动完成功能实现代码，实现同百度搜索一样的自动完成功能，希望能够帮助新学习的朋友，有需要的朋友可以下载,高手请多指点。
jQuery仿百度搜索引擎.zip
08-12
jQuery仿百度搜索引擎
jQuery仿百度搜索框下拉特效代码
03-20
jQuery仿百度搜索框下拉代码是一款点击搜索框默认弹出下拉热门关键词列表，进行快捷搜索效果。
jquery仿百度经验滑动切换浏览效果
10-24
本文给大家分享的是使用jQuery实现仿百度经验华东切换浏览效果，非常的炫酷，推荐给大家。有需要的小伙伴可以参考下
基于jquery的搜索框输入查询,模拟百度搜索查询
12-20
基于jquery,模拟百度搜索,可以边输入就直接查询数据库
jquery仿百度下拉列表搜索框
08-22
jquery仿百度搜索框下拉列表 ，可实现自动模糊查询，显示已输入匹配信息
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
01-19
本文实例讲述了jQuery实现的仿百度,仿谷歌搜索下拉框效果。分享给大家供大家参考，具体如下： 运行效果图如下： 完整实例代码如下： <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd> <html> <head> <title>仿百度搜索下拉框，放搜索下拉框，仿谷歌搜索下拉框</title> <META content=仿谷歌百度搜索下来内容显示，可以通过ajax下拉也可以调用数据库数据，目前只
基于jquery的仿百度搜索框效果代码
01-15
基于jquery的类似百度的输入框，有简单的样式
php仿百度搜索引擎
12-13
php仿百度搜索引擎,适合学习php用,作为例子.
【转载】使用jquery做类似搜索引擎效果
张宏伟Charles的专栏
02-21 491
当用户输入电话号码的时候，会自动出现提示。类似于google搜索引擎效果， 之前用javascript写过一个，但是目前使用jquery更为简单。 1 var line = 0; 2 var sendType; 3 function del(){ 4 if($("#newDiv")){ 5 $("#n
仿百度搜索框–jQuery版本
曾经
09-03 1434
仿百度搜索框–jQuery版本 时维九月，序属三秋。此吾工作三个月之日，亦是吾重拾博客之时。一路坎坷走来，经历良多，收获甚多。 正题 百度搜索框是企业开发中常用的一项功能，作为一个前端工作者，自然也是必不可少的。这篇博客中主要介绍jQuery版本的实现。 <!DOCTYPE html> <html> <head> <meta charset="UTF...
html仿百度搜索代码,Vue 仿百度搜索功能实现代码
weixin_29628637的博客
06-04 255
无上下选择jsonpwindow.onload = function(){var vm = new Vue({el:'#box',data:{myData:[],t1:''},methods:{get:function(){this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{wd:this.t1},{js...
仿百度搜索功能
weixin_30254435的博客
11-23 133
/***鼠标选中某个li方法*1.参数obj：this*/function ulLiText(obj) { //检索条件可按名称字母查询 $("#nameZm").val($(obj).text()); //调用省级列表 getAreaList(); //隐藏检索信息 $("#carName").hide();}//显示背景颜色$('#carN...
jquery百度搜索效果
最新发布
04-03
However, I can suggest some resources that might help you achieve the jQuery search effect: 1. jQuery UI Autocomplete: This is a feature-rich autocomplete plugin that can be easily customized to ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值