模糊查询跳转位置:
<!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>