Jquery实现搜索功能
<script>
//搜索功能
(function ($) {
jQuery.expr[':'].Contains = function (a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
function filterList(search, list) {
$(search)
.change(function () {
var filter = $(this).val();
if (filter) {
$(".borderD").hide();
$(".first_letter").hide();
$matches = $(list).find('a:Contains(' + filter + ')').parent();
$('li', list).not($matches).slideUp();
$matches.slideDown();
} else {
$(".borderD").show();
$(".first_letter").show();
$(list).find("li").slideDown();
}
return false;
})
.keyup(function () {
$(this).change();
});
} $(function () {
filterList($("#search"), $(".city_list"));
});
}(jQuery));
</script>
<div class="search_city">
<input type="text" placeholder="请输入城市" ng-model="search"/>
<a><img src="/Content/images/shanchu.png"/></a>
</div>
<div class="city_list_block">
<div class="white-bg city-name">
<span style="color: #b0b0b0;">当前城市</span>
<span id="locate_city">
<em class='l_status'>定位中 <span class='ani_dot'>...</span></em>
</span> <div class="clearBoth"></div>
</div>
<div class="white-bg city-name">
<span style="color: #b0b0b0;">热门城市</span>
<a city_id='1' href="#">
福州
</a>
<a city_id='2' href="#">
北京
</a>
<a city_id='13' href="#">
上海
</a>
<a city_id='12' href="#">
广州
</a> <div class="clearBoth"></div>
</div>
<ul class="city_list">
<div ng-repeat="area in areaList|filter:{city:search }">
<div class="first_letter" ng-show="$index == 0 || areaList[$index - 1].PY != area.PY"><span
id="{{area.PY|uppercase}}">{{area.PY|uppercase}}</span></div>
<li><a city_id="3" href="#">{{area.city}}</a></li>
<div class="borderD"></div>
</div>
<div class="first_letter"><span id="well">#</span></div>
<li><a city_id="3" href="#"></a></li>
<div class="borderD"></div>
</ul>
</div>
<div class="FL_list">
<ul>
<li><a href="" ng-click="goto('A')">A</a></li>
<li><a href="" ng-click="goto('B')">B</a></li>
<li><a href="" ng-click="goto('C')">C</a></li>
<li><a href="" ng-click="goto('D')">D</a></li>
<li><a href="" ng-click="goto('E')">E</a></li>
<li><a href="" ng-click="goto('F')">F</a></li>
<li><a href="" ng-click="goto('G')">G</a></li>
<li><a href="" ng-click="goto('H')">H</a></li>
<li><a href="" ng-click="goto('I')">I</a></li>
<li><a href="" ng-click="goto('J')">J</a></li>
<li><a href="" ng-click="goto('K')">K</a></li>
<li><a href="" ng-click="goto('L')">L</a></li>
<li><a href="" ng-click="goto('M')">M</a></li>
<li><a href="" ng-click="goto('N')">N</a></li>
<li><a href="" ng-click="goto('O')">O</a></li>
<li><a href="" ng-click="goto('P')">P</a></li>
<li><a href="" ng-click="goto('Q')">Q</a></li>
<li><a href="" ng-click="goto('R')">R</a></li>
<li><a href="" ng-click="goto('S')">S</a></li>
<li><a href="" ng-click="goto('T')">T</a></li>
<li><a href="" ng-click="goto('U')">U</a></li>
<li><a href="" ng-click="goto('V')">V</a></li>
<li><a href="" ng-click="goto('W')">W</a></li>
<li><a href="" ng-click="goto('X')">X</a></li>
<li><a href="" ng-click="goto('Y')">Y</a></li>
<li><a href="" ng-click="goto('Y')">Z</a></li>
<li><a href="">#</a></li>
</ul>
</div>
Jquery实现搜索功能的更多相关文章
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- jquery一句话实现快速搜索功能
jquery一句话实现快速搜索功能 //快捷搜索公共方法,其中obj为显示行的子节点function filter(obj, filterNameValue){ $(obj).hide().filte ...
- jQuery实现简单前端搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用jquery的contains实现搜索功能
/ jquery实现的搜索功能 $('#search_btn').on('click',function(){ var txt=$('#inputValue').val(); var value=$( ...
- 使用jquery select2实现下拉框搜索功能
由于公司后台系统下拉框数据量太多了,用户操作起来要不方便所以增加了下拉框里面一个搜索功能 1从官网下载jquery select2 下来 地址https://select2.github.io/ 2: ...
- JQuery :contains选择器,可做搜索功能,搜索包含关键字的dom
假设有一个加油站列表,找到所有包含某某关键字的加油站. 选择所有包含 "is" 的 <p> 元素: $("p:contains(is)") 搜索功能 ...
- jquery实现简单的搜索功能
管理系统中需要实现导航列表的搜索功能,写了一个简单的小栗子: <!DOCTYPE html> <html lang="en"> <head> & ...
- 基于前端javascript的搜索功能
发表于 2013/11/07 当在数据量不是很大,而且没有后端对应的功能接口的时候,一些简单的搜索功能基本上是前端去实现的,正好最近用到,写了一个,贴出来和大家分享: 功能描述: 按下键盘后及时搜索条 ...
- phpcms的验证码替换 及 phpcms实现全站搜索功能
在使用phpcms替换网页的时候,除了正常的替换栏目.内容页等,其他的什么验证码啦,提交表单了,搜索功能了,这些在替换的时候可能会对一些默认文件有一些小小 的改变 下面就是自己在失败中成功的过程,最后 ...
随机推荐
- 简明Python3教程 7.运算符和表达式
简介 你写的大多数逻辑行都包含表达式.表达式的一个简单例子是2 + 3.一个表达式可分为操作符和操作数两部分. 操作符的功能是执行一项任务:操作符可由一个符号或关键字代表,如+ .操作符需要数据以供执 ...
- 隐变量模型(latent variable model)
连续隐变量模型(continuous latent model)也常常被称为降维(dimensionality reduction) PCA Factor Analysis ICA 连续的情形比离散的 ...
- WPF中的菜单模板
原文:WPF中的菜单模板 资源字典代码如下: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xa ...
- UVA 10641 - Barisal Stadium(DP + 几何)
题目链接:10641 - Barisal Stadium 题意:逆时针给定n个点,在给m个灯,每一个灯有一个花费,要求最小花费使得全部边能被灯照到 思路:用向量叉积推断向量的顺逆时针关系,从而预处理出 ...
- WPF(C#)中Bitmap与BitmapImage相互转换
原文:WPF(C#)中Bitmap与BitmapImage相互转换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wangshubo1989/art ...
- 升级PHPstudy自带的mysql版本 从5.5升级到5.7.22
原文:升级PHPstudy自带的mysql版本 从5.5升级到5.7.22 版权声明:请注意:如需转载请注明出处. https://blog.csdn.net/qq_32534555/article/ ...
- CentOS6.5优盘安装
从CentOS6.5开始直接把iso文件写入u盘就可实现优盘安装 windows平台:1.用UltraISO打开iso(如:CentOS-6.5-x86_64-bin-DVD1.iso)2.然后点“启 ...
- DataTemplate
DataTemplate作用是布局+数据绑定 使用DataTemplate 同时完成样式布局和数据绑定 <Window.Resources> <DataTemplate x:Key= ...
- 【C#】WindowsAPICodePack-Shell使用教程
原文:[C#]WindowsAPICodePack-Shell使用教程 1.首先在项目中添加WindowsAPICodePack的Nuget包. 点击安装即可. 2.获取<我的电脑>的 ...
- 将WriteableBitmap转为byte[]
原文:将WriteableBitmap转为byte[] Win8 metro中的操作与之前的版本有所不同,因此作为一个新手,我将自己的一些问题解答记录了下来,希望与大家分享!! 下面是将Writeab ...