精华内容
下载资源
问答
  • 用户在前台某个功能模块使用了搜索功能,我想统计一下用户对列表中哪些列表项的数据感兴趣,记日志或记表或缓存都行,谁有好点的思路,麻烦赐教一下,谢谢
  • web搜索框的制作(必应)

    千次阅读 多人点赞 2016-08-29 10:32:49
    前两天没事突然对搜索来了兴趣,我一直在想搜索框中我们输入一些字或者字母,为何下面就会有一些自动补齐的相关搜索,比如我在搜索输入框中输入一个字母e,下面就会出现饿了么,e租宝,ems等相关的搜索链接。...

            前两天没事突然对搜索来了兴趣,我一直在想搜索框中我们输入一些字或者字母,为何下面就会有一些自动补齐的相关搜索,比如我在搜索输入框中输入一个字母e,下面就会出现饿了么,e租宝,ems等相关的搜索链接。然后经过百度,发现原来很多厂商的服务器早已经为我们弄好了。

            我们只需要写个输入框,然后获取输入框里的信息,将信息打包,请求服务器,然后获取数据再显示在界面上就OK了。想想是不是很简单呢,因为我们不需要做很多相关的算法和处理因为服务器早已经做好了,我们做的只是记住调用的方法,然后调用就行了。

            然后我找到了的bing必应,微软旗下的搜索引擎,试着做了一个。

    效果如下:



           看了效果图大家可能会问了,为什么网址是api.bing.com这个类似cn.bing.com(必应的网址),这个就涉及到跨域了,因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,相关信息大家可以百度,这里就不详细阐述了,我只说一点,跨域问题只存在于你的JS代码中,服务器是没有跨域问题的
            然后我这里使用的是Fiddler来解决跨域问题,我的理解是它可以帮助你把你本地的文件映射到其它域名下,这样你的JS代码就可以访问这个域名下的JS对象了,当然这只是在欺骗你本地的JS代码,让你的JS代码误以为你们是一个域名下的,然后可以去访问,服务器那边并不会产生什么影响。这个只是我本人的看法,有表述不正确的地方还望大家指出,谢谢大家。
            说了这么多,大家应该也有一个对搜索框制作的模糊印象了吧,下面是具体代码:

    bing_search_index.html:
    需要引入jquery库
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<!-- 兼容IE -->
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title>bing search</title>
    	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    	<div class="bg-div">
    		<div class="search-box">
    			<div class="logo"></div>
    			<form id="search-form">
    				<input type="text" class="search-input-text" id="search-input" name="q" />
    				<input type="submit" class="search-input-button" value=""/>
    			</form>
    		</div>
    	</div>
    	<div class="suggest" id="search-suggest" style="display:none;">
    		<ul id="search-result">
    			<li>搜索结果1</li>
    			<li>搜索结果2</li>
    			<li></li>
    		</ul>
    	</div>
    <script type="text/javascript" src="js/jquery1-11-1.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    </body>
    </html>

    js/script.js:
    $(document).ready(function(){
    	$('#search-input').bind('keyup', function() {
    		var jqueryInput = $(this);
    		//用户输入
    		var searchText = jqueryInput.val();
    		//请求必应的服务器,获得相关搜索信息
    		$.get('http://api.bing.com/qsonhs.aspx?q=' + searchText,function(json){
    			//服务器返回的信息
    			var data = json.AS.Results[0].Suggests;
    			var html="";
    			//将服务器返回的信息加到li标签里
    			for(var i = 0; i < data.length; i++){
    				html += '<li>' + data[i].Txt + '</li>';
    			}
    			$('#search-result').html(html);
    
    			$('#search-suggest').show().css({
    			top: $('#search-form').offset().top+$('#search-form').height()+10,
    			left: $('#search-form').offset().left,
    			// $('#search-form').offset().left的结果是468.5 
    			// 不知道为什么left不加4只有464.25的宽度
    			position: 'absolute'
    			});
    		},'json');
    	});
    
    	$(document).bind('click',function(event) {
    		// 隐藏搜索结果
    		$('#search-suggest').hide();
    	});
    
    	$(document).delegate('li', 'click', function(event) {
    		var li_text = $(this).text();//取到li里的文本
    		//返回结果的链接
    		location.href = 'http://cn.bing.com/search?q=' + li_text;
    	});
    });
    

    style.css
    *{
    	margin: 0;
    	padding: 0;
    }
    body{
    	background-color: #333;
    }
    
    .bg-div{
    	/*bing的背景图*/
    	background-image: url(images/bg.jpg);
    	width: 1325px;
    	height: 630px;
    	margin: 0 auto;
    }
    
    .logo{
    	/*bing的logo*/
    	background-image: url(images/logo.png);
    	width:107px;
    	height: 53px;
    	float: left;
    }
    
    form{
    	float: left;
    	background-color: #fff;
    	padding: 5px;
    	margin-left: 20px;
    }
    
    .search-input-text{
    	/*消除input的边框*/
    	border: 0;
    	width: 400px;
    	height: 36px;
    	line-height: 36px;
    	float: left;
    	/*去掉文本框点击后显示的高亮效果*/
    	outline: none;
    }
    
    .search-input-button{
    	border: 0;
    	/*bing的搜索按钮图*/
    	background-image: url(images/search.png);
    	width: 36px;
    	height: 36px;
    	float: left;
    	cursor: pointer;
    }
    
    .search-box{
    	position: absolute;
    	top: 30%;
    	left: 25%;
    }
    
    .suggest{
    	width: 446px;
    	background-color: #fff;
    	border: 1px solid #999;
    }
    
    .suggest ul{
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    .suggest ul li{
    	padding: 3px;
    	font-size: 14px;
    	line-height: 25px;
    	cursor: pointer;
    	list-style: none;
    }
    
    .suggest ul li:hover{
    	text-decoration: underline;
    	background-color: #e5e5e5;
    }

    对Fiddler不熟悉的可以看看这里:
    1.打开fiddler,然后请求http://api.bing.com/bing_search_index.html
    2.在fiddler里找到那个请求
           
    3.再在右边对其添加规则




    展开全文
  • web搜索框关键字颜色高亮渲染

    千次阅读 2018-07-12 14:36:03
    { title: "资质編碼", key: "code", width: "280px", render: (h, params) =&gt;...
    {
                                    title: "资质編碼",
                                    key: "code",
                                    width: "280px",
                                    render: (h, params) => {
                                        // console.log(params)
                                        // console.log(params.row.id)
                                        // console.log(params.row.status_test)
                                        // 点击修改前
                                        if (params.row.status_test == 0) {
                                            let input = this.input_data3;
                                            if (input.length == 0) {
                                                return h('div'), [
                                                    h('span', {}, params.row.code),
                                                ]
                                            }
                                            else {
                                                return h('span',
                                                    {
                                                        domProps: {
                                                            innerHTML: params.row.code.replace(input, '<span style="background: #ffff00;">'+input+'</span>')
                                                        }
                                                    });
                                            }
                                        }
    
    render:(h,params)=>{
       return h('span',
        {
       domProps: {
     innerHTML: params.row.jz.replace(this.input_data3, 
    '<span style="background: #ffff00;">'+this.input_data3+'</span>')
                                }
                            });
                    }      

     

    展开全文
  • Web搜索引擎框架研究.pdfWeb搜索引擎框架研究.pdfWeb搜索引擎框架研究.pdfWeb搜索引擎框架研究.pdfWeb搜索引擎框架研究.pdfWeb搜索引擎框架研究.pdf
  • wc-搜索框 Web组件搜索框 可以使用插件(如实时服务器)运行demo.html页面。
  • web网站搜索框的搜索实现

    千次阅读 2018-04-21 22:29:01
    function aiqiyi(){ var t=获取搜索框值;window.location.href="http://so.iqiyi.com/so/q_"+t;http://so.iqiyi.com/so/q_ 是爱奇艺的搜索,。。。。知道某个网站的搜索网址的方法基本就是前面一段了。...

    js 

    添加一个按钮 ,给按钮,添加,onclick事件="aiqiyi()"


    function aiqiyi(){

     var t=获取搜索框值;

    window.location.href="http://so.iqiyi.com/so/q_"+t;

    http://so.iqiyi.com/so/q_ 是爱奇艺的搜索,。。。。

    知道某个网站的搜索网址的方法


    基本就是前面一段了。

    个人经验记录,如有不对请指正。

    展开全文
  • 6种非常精美的Web前端搜索框展示(附源码)
  • web网页设计 JavaScript 搜索框代码

    千次阅读 2019-12-13 16:34:21
    JavaScript实现搜索框样式的代码

    初学JavaScript,略微懂得一点毛皮,得出一点复习经验,在这里分享一下。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>搜索框</title>
    </head>
    <style>
    #i1{
    	color: grey;
    }
    </style>
    <body>
    	搜索<input type="text" value="请输入关键字" id="i1">
    </body>
    </html>
    <script>
    var ip = document.getElementById('i1');
    //添加事件,获得焦点,value不为“请输入关键字”则value变为空,输入文字为黑色字体
    ip.addEventListener("focus",function(){
    	if (ip.value=="请输入关键字") {
    	ip.value=""
    	ip.style.color="black"
    	}
    })
    // 添加事件,失去焦点时,value为空则回到默认状态
    ip.addEventListener("blur",function(){
    	if (ip.value=="") {
    	ip.style.color="grey"
    	ip.value="请输入关键字"
    	}
    })
    // 添加事件,如果value新输入的与默认的value相同。则再次变为默认样式。
    ip.addEventListener("change",function(){
    	if (ip.value=="请输入关键字") {
    	ip.style.color="grey"}
    })
    </script>
    
    展开全文
  • 6种非常精美的Web前端搜索框展示(附源码)
  • 6种非常精美的Web前端搜索框展示(附源码)
  • 6种非常精美的Web前端搜索框展示(附源码)
  • 6种非常精美的Web前端搜索框展示(附源码)
  • 6个非常精美的Web前端表单提交以及搜索框(六)
  • Web全栈~15.购物车案例(Logo和搜索框)

    万次阅读 多人点赞 2021-01-17 06:45:46
    Web基本笔记~15.购物车案例(Logo和搜索框) 上一期
  • 1. jQuery按栏目搜索框代码,赶紧来体验一下。 2. CSS3带凹槽搜索框,这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本动画插件。3.jQuery视频侧边隐藏搜索框,jquery实现的,会在当鼠标光标移动...
  • 6个漂亮的Web前端表单提交以及搜索框(上)
  • 6个漂亮的Web前端表单提交以及搜索框(下)
  • 4. CSS3响应式伸缩搜索框 能在支持 FireFox、Chrome、Safari、傲游、搜狗、360浏览器。 5. css3带搜索框下拉菜单 6. jQuery当乐网搜索下拉框
  • webpy框架

    千次阅读 2017-06-22 11:07:15
    python网络编程学习笔记(10):webpy框架 转载请注明:@小五义http://www.cnblogs.com/xiaowuyi  django和webpy都是python的web开发框架。Django的主要目的是简便、快速的开发数据库驱动的网站。它强调...
  • 在线效果:http://ynif.v099.10000net.cn/demo/chaxun/1/chaxun/index.html
  • 在线效果:http://ynif.v099.10000net.cn/demo/chaxun/2/chaxun/index.html
  • 百度地图带自动地位和搜索框web

    千次阅读 2018-05-05 13:16:54
    求教,js实现百度地图自动定位并带有搜索框。。。
  • 为什么写这篇文章,一是因为这个是web系统常见功能之一,二是因为面试的时候,这个题目出现的概率很高,也很考验...搜索框UI显示正常,布局合理;  ·搜索页面布局合理,无错别字;  ·搜索出的结果展示,布局合理;
  • web9影视搜索播放

    2020-08-21 12:47:58
    web9影视搜索播放系统结构:web9影视搜索播放======窗口程序集1||||------__启动窗口_创建完毕||||------_按钮1_被单击||||------_超级列表1_被双击||||------_超级列表2_被双击||||------_超级列表
  • web前端】关于搜索框的编写

    千次阅读 2017-11-10 10:55:43
    //全局输入框操作  $('.clearSearch').on('click',function () {  $(this).hide().parent().find('input').val('');  $('#totalSize').val(0);  $('.searchName').click();  }); //键盘按下事件
  • 在线效果:http://ynif.v099.10000net.cn/demo/biaodan/1/biaodan/index.html
  • 在线效果:http://ynif.v099.10000net.cn/demo/biaodan/5/biaodan/index.html
  • 在线效果:http://ynif.v099.10000net.cn/demo/biaodan/3/biaodan/index.html
  • 在线效果:http://ynif.v099.10000net.cn/demo/biaodan/4/biaodan/index.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 264,172
精华内容 105,668
关键字:

web搜索框