怎么使用js技术实现文字搜索匹配啊?

Holdmyfire_enen 2015-10-16 11:07:22

我想写这个的jsp但是不知道怎么写这里的代码。。。求大神帮助。。。
...全文
1088 点赞 收藏 5
写回复
5 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
July_jdy 2019-01-14
有用原生js写的吗?
回复
vswen5 2015-10-17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    <input type="text" id="vstext" placeholder="请输入1"/>
	<ul id="vsul"></ul>
  </body>
  <script src="jquery-1.7.2.min.js"></script>
  <script>
  var arr = ["1","2","3","11","123","56"];
  $("#vstext").keyup(function() {
		$("#vsul li").remove();
  		var vl = $("#vstext").val();
		if(vl==""){
			return false;
		}
  		$(arr).each(function(index){
			if(this.indexOf(vl)>=0){
				$("#vsul").append("<li>"+this+"</li>");
			}
		});
  });
  </script>
</html>
回复
liusaint1992 2015-10-16


这样的功能吗?

keyup 的时候 获取输入框的值,ajax到后台查询匹配的返回过来,

再在success中

把返回过来的加入到输入框下面div中。显示出来。
回复
liusaint1992 2015-10-16
我并不是用的option。 而是ul,li。ul相对于searchinput定位。根据返回的数据填充li到ul中。当然,点击li的时候会把那一项的内容放入输入框。 至于要不要直接搜索还是点按钮才搜索要你自己决定。

		<div class="searchinput">
			<input  type="text"  class="user_loadq cz_top_input" style="width:169px;" >
			<ul class="searchmore" id="searchmore">
			</ul>
			<div class="clearfloat"></div>
		</div>
jquery代码:

        	$(document).ready(function(){
        		$(".user_loadq").keyup(function(){//搜索
        			var uname = trim($(this).val());
        			if(uname.length >= 1){
        				$.getJSON('action/theaction.php?type=search&q='+uname,null,function (data) {
        					var item;
        					$(".searchmore").empty();//清空原来的ul
        					if(data.res !=null){
        						$.each(data.res,function(i,res){//循环加入到ul中去
        							item = "<li>"+res+"<li>";
        							$(".searchmore").append(item);
        						})
        						$(".searchmore").show();
        					}else{
        						$(".searchmore").hide();
        					}
        				});
        			}else{
        				$(".searchmore").hide();
        			}
        		})
        		$(document).on("click", ".searchmore li", function(){
        			$(".user_loadq").val(trim($(this).text()));
        			$(".searchmore").hide();
        		});

        		$(".searchinput").mouseleave(function(){
        			$(".searchmore").hide();
        		})

        	})
回复
Holdmyfire_enen 2015-10-16
引用 1 楼 liusaint1992 的回复:
这样的功能吗? keyup 的时候 获取输入框的值,ajax到后台查询匹配的返回过来, 再在success中 把返回过来的加入到输入框下面div中。显示出来。
那这些数据怎么经过上面的select里面的option筛选呢?option的onclick事件要写上面函数呀?
回复
相关推荐
发帖
Web 开发
创建于2007-09-28

8.0w+

社区成员

Java Web 开发
申请成为版主
帖子事件
创建了帖子
2015-10-16 11:07
社区公告
暂无公告