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>