js实现搜索功能

<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>