模糊查询位置跳转

最新推荐文章于 2019-07-17 13:55:58 发布
最新推荐文章于 2019-07-17 13:55:58 发布
阅读量518 收藏
点赞数
分类专栏： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34044224/article/details/60144513
版权

模糊查询跳转位置：


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模糊查询跳转位置</title>
</head>
<body>
<style type="text/css">
ul,li{margin:0;padding:0;}
.list-box{margin-top:15px;width:220px;max-height:500px;overflow-y:auto;background-color:#ccc;text-align:center;}
.list-box ul{position:relative;top:0;left:0;}
.list-box li{list-style:none;height:40px;line-height:40px;border-bottom:1px solid #ddd;}
.color-red{color:#f00;font-weight:bold;}
</style>
<div class="search-box">
    <input type="text" value="">
    <input class="btn-search" type="button" value="搜索">
</div>
<div class="list-box">
    <ul>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
        <li>46</li>
        <li>47</li>
        <li>48</li>
        <li>49</li>
        <li>50</li>
        <li>51</li>
        <li>52</li>
        <li>53</li>
        <li>54</li>
        <li>55</li>
        <li>56</li>
        <li>57</li>
        <li>58</li>
        <li>59</li>
        <li>60</li>
        <li>61</li>
        <li>62</li>
        <li>63</li>
        <li>64</li>
        <li>65</li>
        <li>66</li>
        <li>67</li>
        <li>68</li>
        <li>69</li>
    </ul>
</div>
<script type="text/javascript" src="many/jquery.min.js"></script>
<script type="text/javascript">
//搜索功能
function searchFn(){
    var oldSearhVal = '', //记忆上一次搜索框里的值
        curIndex = '', //已搜索的当前索引
        n = 0, //检索数组的递增量
        timer; //定时器
    $(document).keydown(function(e){
        if(e.keyCode == 13 && $(document.activeElement).parent().is('.search-box')){
            searchPosFn($(document.activeElement).parent('.search-box'));//搜索定位方法
        }
    });
    $('.btn-search').on('click',function(){
        searchPosFn($(this).parent('.search-box'));//搜索定位方法
    });
    function searchPosFn(searchWrap){ //搜索定位方法
        if(timer){
            clearTimeout(timer);
        }
        var searchVal = searchWrap.find('input').val();
        var listBox = $('.list-box');
        var resultIndexArr = []; //匹配结果数据
        if(searchVal != oldSearhVal){
            n = 0;
            oldSearhVal = searchVal;
        }
        var searchItem = listBox.find('li');
        searchItem.each(function(i){
            var text = $(this).text();
            if(text.indexOf(searchVal)!== -1){
                resultIndexArr.push(i);
            }
        });
        var len = resultIndexArr.length;
        if(len > 0){
            curIndex = resultIndexArr[n];
            var curPosT = searchItem.eq(curIndex).position().top;
                searchItem.eq(curIndex).addClass('color-red')
                                           .siblings().removeClass('color-red');
            timer = setTimeout(function(){
                searchItem.eq(curIndex).removeClass('color-red');
            },1500);
            listBox.animate({
                scrollTop : curPosT
            },300);
            if(n < len-1){
                n++;
            }else{
                n = 0;
            }
        }
    }
}
searchFn();
</script>
</body>
</html>


BigTooth19
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
模糊搜索并跳转页面功能实现
MorningLight_LQ的博客
06-08 547
简单好用的搜索点击或回车跳转功能
前端使用js模糊搜索
cs524100的专栏
04-02 192
先上成品
JavaWeb_CartDemo-购物车 + 收藏 + 浏览记录 + 分页 + 模糊查询（附：404、500、编码过滤）
10-24
JavaWeb_CartDemo-购物车 + 收藏 + 浏览记录 + 分页 + 模糊查询（附：404、500、编码过滤）- Lux_Sun CSDN Blog：https://blog.csdn.net/Dream_Weave
vue实现Input输入框模糊查询方法
12-13
本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码，供大家参考，具体内容如下 原理：原生js的indexOf() 方法，该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。 如果在数组中没找到指定元素则返回 -1。 下面先看示例： 搜索前： 搜索后： 实现方法： methods:{ // 点击搜索工程 search(){ // 支持模糊查询 // this.xmgcqkJsonsData：用于搜
模糊查询“%”转换问题
Phoneix的博客
05-31 1096
问题由来： 在做一个系统，功能是充值查询，在此用的是模糊查询（比如我要查询一个叫小明的同学，我只输入“小”表内就出现所有姓名中有关小的同学）在做的过程中遇到一个问题，都知道模糊查询少不了%的应用。 在此我还写过关于D层访问数据库的初始写法，方法没有错，放到SQL sever里是可以找到的，但是写在VS里需要强转，就遇到了下图的问题。 在让大家看下我数据库表的设计作为参考。注意我每个列明的...
分页模糊查询商品
03-10
在IT行业中，分页模糊查询商品是一个常见的需求，特别是在电商网站、搜索引擎等应用中，用户通常需要通过输入关键词进行商品的快速查找，并且为了优化用户体验，通常会采用分页的方式来展示大量的搜索结果。...
SSM框架的分页模糊查询代码(精)
08-18
【学习SSM分页模糊查询必备】 .zip格式，方便Windows和Unix用户 登录页地址：http://localhost:8080/ssm3/user/login 账号密码为数据库中所有用户名和密码(admim 123) tomcat配置文件和jdbc不匹配的请自行修改 ...
JS实现模糊查询带下拉匹配效果
12-29
“搜索”可以使我们更快的找到某一个关键词或者某一个商品，所以“模糊查询”和“下拉匹配”也成了前端必备的一个小技能，开门见山，希望对朋友们有帮助。 —搜索框模糊查询带下拉匹配效果html— <!------------...
struts+hibernate分页 模糊查询
12-31
### Struts + Hibernate 分页与模糊查询 #### 一、简介 在软件开发过程中，特别是Web应用程序中，分页查询和模糊查询是非常常见的需求。本文将详细介绍如何利用Struts框架结合Hibernate实现这两种功能。 #### 二...
wap浏览自动跳转到wap页面的js代码
10-25
响应式设计通过CSS媒体查询等技术，使得同一页面能够根据不同的设备屏幕尺寸和分辨率自动调整布局，从而实现“一处开发，多处使用”的效果。这在一定程度上也减少了wap自动跳转的需求，但目前wap页面依然在某些特定...
bootstrapTable分页、模糊查询、数据刷新、页面跳转。。。各种坑
qq_39628595的博客
04-12 4291
首先准备好用到的js和css bootstrap下载地址：http://www.bootcss.com/ bootstrap table插件下载地址 官网：https://bootstrap-table.com/ Github：https://github.com/wenzhixin/bootstrap-table 主要css和js bootstrap-table.css、jquery....
SQL Server CHARINDEX和PATINDEX详解
DigJim的专栏
05-28 1万+
SQL Server CHARINDEX和PATINDEX详解       假如你写过很多程序，你可能偶尔会碰到要确定字符或字符窜串否包含在一段文字中，在这篇文章中，我将讨论使用CHARINDEX和PATINDEX函数来搜索文字列和字符串。我将告诉你这两个函数是如何运转的，解释他们的区别。同时提供一些例子，通过这些例子，你可以可以考虑使用这两个函数来解决很多不同的字符搜索的问题。       
vue仿美团饿了么，搜索框模糊查询，并显示
weixin_44012931的博客
07-17 2334
首先需要一个容器ul来放模糊查询出来的数据 定义一个空数组，判断输入的内容长度是否大于0，用过滤器filter，过滤shops（所有的数据），如果要搜索框中的内容与每一个businessName有相同的地方，具体可以看search方法使用，就把当前内容放在定义好的空数组中。 searchKeyup(shops){ this.ulList = []; if(this.inputText....
关于下拉框搜索功能（模糊搜索）
热门推荐
dapyandxpy的博客
05-29 1万+
1. 首先在html页面定义一个div和获取下拉菜单的div &lt;div class="col-xs-7"&gt; &lt;input type="text" class="form-control" placeholder="请选择上报机构" id="reportOrgan" onblur="setTimeout('hideOrganDiv()',200);&q
搜索关键字：ajax实现；点击搜索到的会添加到搜索框内，点击搜索跳转页面；
n20164206199的博客
01-10 9718
登录注册（记住密码）https://blog.csdn.net/n20164206199/article/details/86218384 搜索关键字点击显示到搜索框，搜索跳转页面  https://blog.csdn.net/n20164206199/article/details/86219679 发布二货跳转到添加界面 首页图片内容、分页的获取与显示  ： https://mp....
SQL多条件模糊查询解决方案(类似百度搜索)
weixin_34273479的博客
10-18 764
参考博文：            SQL LIKE语句多条件贪婪匹配算法          SQL LIKE语句多条件贪婪加权匹配算法(改进版)          SQL LIKE语句多条件贪婪加权匹配(新增必要词指定)   前言：          算法的基本特性在前几篇博客中已经做了详细的说明，经过不断的改进优化，到归仓的时候了，也就是说，该算法告一段落，不再更新...
uniapp模糊查询如何跳转页面
最新发布
07-21
在uni-app中进行模糊查询并跳转到新的页面，通常你会在一个表单或者搜索框组件内监听用户的输入变化，然后根据这个输入动态地导航到目标页面。这里是一个简单的步骤说明： 1. 首先，在vue文件中创建一个`<search>`组件，它可以包含一个`<input>`用于用户输入，并处理键盘事件： ```html <template> <view class="search"> <input v-model="query" placeholder="请输入关键词" @input="handleSearch" /> <button @click="navigateToResult">搜索</button> </view> </template> <script> export default { data() { return { query: '', }; }, methods: { handleSearch(e) { this.searchKeyword = e.detail.value; }, navigateToResult() { if (this.searchKeyword.length > 0) { // 这里根据查询结果决定跳转哪一页 const page = this.getDestinationPage(this.searchKeyword); this.$router.push(page); } }, getDestinationPage(keyword) { // 这里可以基于keyword返回你要跳转的具体页面路径，如 '/result?keyword=' + keyword // 如果有模糊匹配服务，也可以调用接口获取对应的结果页面 let page = `/result?keyword=${encodeURIComponent(keyword)}`; return page; }, }, }; </script> ``` 2. 然后在`getDestinationPage`方法中处理模糊查询逻辑，如果需要从服务器获取数据，你需要调用API并根据返回结果决定跳转到哪个页面。 3. 当`navigateToResult`被触发时，检查输入是否为空，如果不是，则通过`$router.push`将当前应用路由指向预设的目标页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值