jQuery仿去哪儿出发城市筛选

今天跟大家分享下hhDrop.js来制作去哪儿城市选择效果。

淘建站为您提供更多_表单代码_城市选择_选择_select，在此特别感谢您对我们的支持与厚爱！

<div class="select_city_box" item="dep-search">
    <span>
        输入出发城市
    </span>
    <input type="text" class="input_city" item="key">
    <button class="btn" type="button" item="commit">
    </button>
    <div class="search_city_result" item="result" style="display:;">
        <a href="javascript:void();">
            广州
        </a>
        没有匹配城市
    </div>
</div>

引入jquery库和hhDrop插件

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hhDrop.js"></script>
<script>
  $(function(){
    $('#hhDrop00').hhDrop({});
    $('#hhDrop01').hhDrop({});    
  })
</script>

hhDrop.js

$(function() {

    $.fn.hhDrop = function(options) {
        var options = jQuery.extend({
            preLoadSrc: "images/loading.gif"
        }, options || {});


        var defaults = {};

        return this.each(function() {

            //默认
            var options = $.extend(defaults, options);
            var $this = $(this);

            var $boxSearch = $this.find('.boxSearch');
            var $lineSearchbg = $this.nextAll().find('.lineSearchbg');



            //出发城市  到达城市
            $boxSearch.click(function() {
                var _this = $(this);
                //点击本身显示隐藏
                if (_this.hasClass('boxSearchHover')) {
                    _this.removeClass('boxSearchHover');
                    _this.children('.btn_search').removeClass('btn_search_current');
                    _this.parent().find('.search_form_suggest').hide();

                } else {
                    _this.addClass('boxSearchHover');
                    _this.children('.btn_search').addClass('btn_search_current');
                    _this.parent().find('.search_form_suggest').show();
                }

                _this.next().find('.clr_after a').click(function() {

                    _this.find('span.key_word b').text($(this).text());

                });


                _this.next().find('.search_city_result a').click(function() {

                    _this.find('span.key_word b').text($(this).text());

                });

                //阻止冒泡
                $(document).bind('click', function(event) {
                    if (!$(event.target).parent().hasClass('boxSearch') && !$(event.target).hasClass('boxSearch') && !$(event.target).parent().parent().hasClass('boxSearch') && !$(event.target).hasClass('input_city')) {
                        _this.children('.btn_search').removeClass('btn_search_current');
                        _this.removeClass('boxSearchHover');
                        _this.parent().find('.search_form_suggest').hide();
                    }
                });

            });

            $lineSearchbg.each(function() {
                //搜索框 请输入目的地、主题或关键词
                $(this).find('#arriveSearchText').focus(function() {
                    var arrive = $(this).val();
                    if (arrive == '请输入目的地、主题或关键词') {
                        $(this).val('').css('color', '#000');
                    }
                });
                $(this).find('#arriveSearchText').blur(function() {
                    var arrive = $(this).val();
                    if (arrive == '') {
                        $(this).val('请输入目的地、主题或关键词').css('color', '#b5b5b5');
                    }
                });

                //删除搜索信息
                $(this).find('#btn_delete').click(function() {
                    $(this).prev('#arriveSearchText').focus().val('').css('color', '#000');
                });
            });
        });
    }
});