<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实现搜索功能的更多相关文章

  1. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  2. jquery一句话实现快速搜索功能

    jquery一句话实现快速搜索功能 //快捷搜索公共方法,其中obj为显示行的子节点function filter(obj, filterNameValue){ $(obj).hide().filte ...

  3. jQuery实现简单前端搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 利用jquery的contains实现搜索功能

    / jquery实现的搜索功能 $('#search_btn').on('click',function(){ var txt=$('#inputValue').val(); var value=$( ...

  5. 使用jquery select2实现下拉框搜索功能

    由于公司后台系统下拉框数据量太多了,用户操作起来要不方便所以增加了下拉框里面一个搜索功能 1从官网下载jquery select2 下来 地址https://select2.github.io/ 2: ...

  6. JQuery :contains选择器,可做搜索功能,搜索包含关键字的dom

    假设有一个加油站列表,找到所有包含某某关键字的加油站. 选择所有包含 "is" 的 <p> 元素: $("p:contains(is)") 搜索功能 ...

  7. jquery实现简单的搜索功能

    管理系统中需要实现导航列表的搜索功能,写了一个简单的小栗子: <!DOCTYPE html> <html lang="en"> <head> & ...

  8. 基于前端javascript的搜索功能

    发表于 2013/11/07 当在数据量不是很大,而且没有后端对应的功能接口的时候,一些简单的搜索功能基本上是前端去实现的,正好最近用到,写了一个,贴出来和大家分享: 功能描述: 按下键盘后及时搜索条 ...

  9. phpcms的验证码替换 及 phpcms实现全站搜索功能

    在使用phpcms替换网页的时候,除了正常的替换栏目.内容页等,其他的什么验证码啦,提交表单了,搜索功能了,这些在替换的时候可能会对一些默认文件有一些小小 的改变 下面就是自己在失败中成功的过程,最后 ...

随机推荐

  1. 简明Python3教程 7.运算符和表达式

    简介 你写的大多数逻辑行都包含表达式.表达式的一个简单例子是2 + 3.一个表达式可分为操作符和操作数两部分. 操作符的功能是执行一项任务:操作符可由一个符号或关键字代表,如+ .操作符需要数据以供执 ...

  2. 隐变量模型(latent variable model)

    连续隐变量模型(continuous latent model)也常常被称为降维(dimensionality reduction) PCA Factor Analysis ICA 连续的情形比离散的 ...

  3. WPF中的菜单模板

    原文:WPF中的菜单模板 资源字典代码如下: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xa ...

  4. UVA 10641 - Barisal Stadium(DP + 几何)

    题目链接:10641 - Barisal Stadium 题意:逆时针给定n个点,在给m个灯,每一个灯有一个花费,要求最小花费使得全部边能被灯照到 思路:用向量叉积推断向量的顺逆时针关系,从而预处理出 ...

  5. WPF(C#)中Bitmap与BitmapImage相互转换

    原文:WPF(C#)中Bitmap与BitmapImage相互转换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wangshubo1989/art ...

  6. 升级PHPstudy自带的mysql版本 从5.5升级到5.7.22

    原文:升级PHPstudy自带的mysql版本 从5.5升级到5.7.22 版权声明:请注意:如需转载请注明出处. https://blog.csdn.net/qq_32534555/article/ ...

  7. CentOS6.5优盘安装

    从CentOS6.5开始直接把iso文件写入u盘就可实现优盘安装 windows平台:1.用UltraISO打开iso(如:CentOS-6.5-x86_64-bin-DVD1.iso)2.然后点“启 ...

  8. DataTemplate

    DataTemplate作用是布局+数据绑定 使用DataTemplate 同时完成样式布局和数据绑定 <Window.Resources> <DataTemplate x:Key= ...

  9. 【C#】WindowsAPICodePack-Shell使用教程

    原文:[C#]WindowsAPICodePack-Shell使用教程 1.首先在项目中添加WindowsAPICodePack的Nuget包.   点击安装即可. 2.获取<我的电脑>的 ...

  10. 将WriteableBitmap转为byte[]

    原文:将WriteableBitmap转为byte[] Win8 metro中的操作与之前的版本有所不同,因此作为一个新手,我将自己的一些问题解答记录了下来,希望与大家分享!! 下面是将Writeab ...