在jquery搜索上添加location.hash

时间:2013-09-15 07:57:45

标签: javascript jquery

我有这个显示结果的脚本

$('#searchList li').bind('click', function() {
                        var li = $(this);
                        var li_val = li.text();
                        $('.flagContainer img').attr('class', 'mediumFlag mediumFlag-'+li.attr('data-country-code'));
                        $('.flagContainer').show();
                        el.val(li_val);
                        el.addClass('selected');
                        el.blur();
                        doSearch();
                    });
                } else {

我正在尝试添加

$('#searchList li').click(function(){
    var hash = $(this).attr('href');
    location.hash = hash;

因此它会在位置栏中显示国家/地区名称,例如www.myexample.com/search#india,但我使用我的方法得到的是#undefined。
这是我的所有custom.js(没有添加位置哈希:

$(document).ready(function() {
    search_text = $('#quickFilterInput').val();
    $('#quickFilterInput').val(search_text).addClass('defaultValue');
    $('#quickFilterInput').focus(function() {
        if ( $(this).val()==search_text ) {
            $(this).val('').removeClass('defaultValue');;
        }
    }).blur(function() {
        if ( $(this).val()=='' ) {
            $(this).val(search_text).addClass('defaultValue');;
        }
    });
    $('.flagContainer').hide();
    $('#quickFilterInput').bind('keyup', function(e) {
        var el = $(this);
        var val = el.val().toLowerCase();
        var w = '';
        if ( val.length > 0 ) {
            el.removeClass('selected');
            $('.flagContainer').hide();
            if ( !el.hasClass('defaultValue') ) {
                var countries = new Array();
                var found = false;
                var query = new Array();
                var phone_val = new Array();
                query.push({'country_lower':{like:val}});
                var current_phone_val = '';
                for ( i = 0; i < val.length; i++ ) {
                    current_phone_val += val[i];
                    if ( db({'country_number':current_phone_val+'*'}).count() > 0 ) {
                        phone_val = new Array();
                        phone_val.push(current_phone_val+'*');
                    }
                }
                if ( phone_val.length > 0 ) {
                    phone_val.push(val);
                    query.push({'country_number':phone_val});
                } else {
                    query.push({'country_number':val});
                }
                db(query).order('title').each( function(r) {
                    if ( $.inArray( r.country, countries ) < 0 ) {
                        found = true;
                        w += '<li data-country-code="'+(r.country_code)+'"><div class="flagContainer"><img src="images/dummy.png" alt="" class="mediumFlag mediumFlag-'+(r.country_code)+'"></div><p>'+(r.country)+"</p></li>"
                        countries.push(r.country);
                    }
                });
                if ( found ) {
                    $('#searchList').html('').html(w);
                    $('#searchList').fadeIn();
                    $('#searchList li').bind('click', function() {
                        var li = $(this);
                        var li_val = li.text();
                        $('.flagContainer img').attr('class', 'mediumFlag mediumFlag-'+li.attr('data-country-code'));
                        $('.flagContainer').show();
                        el.val(li_val);
                        el.addClass('selected');
                        el.blur();
                        doSearch();
                    });
                } else {
                    $('#searchList').html('').html('<div class="noMatches"><strong>No countries found.</strong> Please refine your search by country first letters or dialing code</div>');
                    $('#searchList').fadeIn();
                }
            }
        }
    }).bind('blur', function() {        
        $('#searchList').fadeOut();
    });

    $('.clearFilterInput').bind('click', function() {
        clearSearch();
    });
});

function doSearch() {
    var el = $('#quickFilterInput');
    var val = el.val();
    var found = false;
    $('.ratesResults').hide();
    var w = '';
    db({
        'country_lower':{like:val.toLowerCase()}
    }).order('special','title').each( function(r) {
        found = true;
        var title = r.title;
        var special = false;
        if ( r.special == 'a' ) {
            special = true;
        }
        if ( title != val ) {
            title = title.replace(r.country, '');
        }
        w += '<div class="ratesBlock'+(special?' special':'')+'">';
        w += '<div class="ratesBlockItem ratesBlockTitle block-1">';
        w += '<p class="title-h4">'+title+'</p>';
        w += '</div>';
        w += '<div class="ratesBlockItem block-2">';
        w += '<p class="title-h4-notax">'+(r.price)+' &pound;</p>';
        w += '<p class="smaller">('+(number_format(r.price_including_tax, 3))+' &pound; incl. VAT)</p>';
        w += '</div>';
        w += '<div class="ratesBlockItem ratesBlockTitle block-3">';
        w += '<p class="title-h4">'+(r.plan_price)+'</p>';
        w += '</div>';
        w += '<div class="ratesBlockItem ratesBlockTitle block-4">';
        w += '<p class="title-h4">'+(r.plan_minutes)+'</p>';
        w += '</div>';
        w += '<div class="ratesBlockItem ratesBlockTitle block-5">';
        w += '<p class="title-h4">'+(r.plan_display)+'</p>';
        if ( r.plan_display != r.text_display ) {
            w += '<p class="smaller">'+(r.text_display)+'</p>';
        }
        w += '</div>';
        w += '<div class="buttonContainer noMobile">';
        w += '<a href="'+(r.href)+'" class="btn small secondaryCta" target="_top">';
        w += '<span class="noArrow">buy</span>';
        w += '</a>';
        w += '</div>';
        w += '</div>';
    });
    if ( found ) {
        $('.ratesTitle').html('Rates to '+val);
        $('#ratesSearchResults').html(w);
        $('.my_vcust').hide();
        $('.ratesResults').fadeIn();
        $('#ratesSearchResults .ratesBlock.special').each( function() {
            $(this).find('.buttonContainer').css('height', ($(this).height()-10)+'px');
        });
    }
}

function clearSearch() {
    $('.ratesResults').fadeOut();
    $('#ratesSearchResults').html('');
    $('#quickFilterInput').val('').trigger('blur').removeClass('selected');
    $('.flagContainer').hide();
    $('.my_vcust').fadeIn();

}

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

1 个答案:

答案 0 :(得分:0)

您正在选择li - 元素并将click事件附加到该元素。这个li元素显然没有href属性,因此它是undefined。将其附加到底层元素:

$('#searchList li a').click(function(){
  //...
});