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

Holdmyfire_enen 2015-10-16 11:07:22

我想写这个的jsp但是不知道怎么写这里的代码。。。求大神帮助。。。

...全文

1323 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

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