IE bug记录

今天是个悲催的日子，chrome实现的非常好，到了IE确实异常痛苦，调了一天，终于调好了。有必要对此进行记录。

html部分代码：

<div class="search" data-city="{{$city}}">
      <form class="index-search" action="/bj/ershouche">
          <input placeholder="请输入关键词，如：别克 1.6L" name="keyword" class="search-text" autocomplete="off" id="search_text">
          <div class="search-button"><button class="search-submit"></button></div>
      </form>
</div>

js部分代码：

var city = $(".search").data('city');
    var selectedItem = -1;
    var index_search_content = $('<div class="index-search-content"></div>').hide().insertAfter('.index-search');
    var searchInput = $('#search_text');
    var clear = function(){
        setTimeout(function () {
            index_search_content.empty().hide();
            setSelectedItem(0);
        }, 500);        
    };

    var setSelectedItem = function(item){
        //更新索引變量
        selectedItem = item ;
        //按上下鍵是循環顯示的，小於0就置成最大的值，大於最大值就置成0
        if(selectedItem < 0){
            selectedItem = index_search_content.find('.list').length - 1;
        }else if(selectedItem > index_search_content.find('.list').length-1 ) {
            selectedItem = 0;
        }
        //首先移除其他列表項的高亮背景，然後再高亮當前索引的背景
        index_search_content.find('.list').removeClass('hover').eq(selectedItem).addClass('hover');
    };

    $(".search-text").on('focus', function (evt) {
        $(this).data('editing', true);
        $.getJSON("/index.php?d=api&c=car_search&m=index&type=get_hot_info", function(result) {
            index_search_content.empty();
            $('<span class="list-title">大家都在搜</span>').appendTo(index_search_content);
            if (result.status === 0 && result.data) {
                $.each(result.data, function(key,val) {
                
                    $('<span class="list"><a class="list-url" href="/'+ city +'/ershouche?keyword=' + val +'">' + val + '</a></span>').appendTo(index_search_content)
                        .hover(function() {
                            $(this).siblings('span').removeClass('hover');
                            $(this).addClass('hover');
                        }, function() {
                            $(this).removeClass('hover');
                            selectedItem = -1;
                        });
                });
            }

        });        

        $(this).css({'border':'1px solid #e14800', 'border-right':'none', 'outline':'0'});
        $('.search-button').css({'border':'1px solid #e14800', 'border-left':'1px solid #ccc'});
        $(".index-search-content").css('display', 'block');        

    }).on('propertychange', function (evt) {

        if ($(this).val() && $(this).data('editing')) {
            var url = "/index.php?d=api&c=car_search&m=index&type=get_info&words="+encodeURIComponent($(this).val()) + "&num=" +Math.round(Math.random()*1000000)
            $.getJSON(url, function(result) {
                index_search_content.empty();
                if (result.status === 0 && result.data) {
                    $.each(result.data, function(key, val) {
                        $('<span class="list"><a class="list-url" href="/'+ city +'/ershouche?keyword=' + val +'">' + val + '</a></span>').appendTo(index_search_content)
                            .hover(function (evt) {
                                $(this).siblings('span').removeClass('hover');
                                $(this).addClass('hover');

                            }, function() {
                                $(this).removeClass('hover');
                                selectedItem = -1;
                            }).click(function(event) {
                                selectedItem = -1;
                            });
                                                   
                    });
                } else if (result.status === -1 && result.data) {
                    $.each(result.data, function(key, val) {
                        $('<span class="list-title">' + val + '</span>').appendTo(index_search_content);
                    });
                }


            });  
            
            $(this).data('editing', true);
        }
    }).on('input', function (evt) {
        
        $.getJSON("/index.php?d=api&c=car_search&m=index&type=get_info&words="+encodeURIComponent($(this).val()), function(result) {
            index_search_content.empty();
            if (result.status === 0 && result.data) {
                $.each(result.data, function(key, val) {
                    $('<span class="list"><a class="list-url" href="/'+ city +'/ershouche?keyword=' + val +'">' + val + '</a></span>').appendTo(index_search_content)
                        .hover(function() {
                            $(this).siblings('span').removeClass('hover');
                            $(this).addClass('hover');
                        }, function() {
                            $(this).removeClass('hover');
                            selectedItem = -1;
                        }).click(function(event) {
                            selectedItem = -1;
                        });
                });
            } else if (result.status === -1 && result.data) {
                $.each(result.data, function(key, val) {
                    $('<span class="list-title">' + val + '</span>').appendTo(index_search_content);
                });
            }
            
        });  

    }).on('blur', function (evt) {
        clear();
        
        $(this).css({'border':'1px solid #ccc', 'border-right':'none'});
        $('.search-button').css({'border':'1px solid #ccc', 'border-left':'1px solid #ccc'});
        $(this).data('editing', false);
    });

    searchInput.keyup(function(event) {
        var e = window.event || event;
        

        if( event.keyCode == 40 || event.keyCode == 38) {
            $(".search-text").data('editing', false);
        }

        if( event.keyCode == 46 || event.keyCode == 8) {
            $(".search-text").data('editing', true);
        }

        if(e.keyCode == 40) {
            if(selectedItem == -1) {
                setSelectedItem(0);
            } else {
                setSelectedItem(selectedItem +1);
            }
            $('.list:eq(' + selectedItem + ')').addClass('hover').siblings('span').removeClass('hover');
            $('.search-text').val($('.list:eq(' + selectedItem + ')').text());

        } else if (e.keyCode == 38) {

            if(selectedItem < 0) {
                setSelectedItem(index_search_content.find('.li').length -1);
            } else {
                setSelectedItem(selectedItem - 1);
            }

            $('.list:eq(' + selectedItem + ')').addClass('hover').siblings('span').removeClass('hover');
            $('.search-text').val($('.list:eq(' + selectedItem + ')').text());
        }

    });

 

技巧一：

$(‘<span>’).appendto(),， 好处胜过 （）.append(span), 

原因分析：可以在后面加上hover click等常见事件，而append则需要在外面重新查找span元素进行加载。

 

Bug one:

Ie进行ajax处理时，通过fidder发现，会有一系列相同请求，很快导致ie崩溃。不仅崩溃，index_search_content中的a标签不能点击跳转。

原因分析：ajax为异步调用，一系列相同请求，会导致index_search_content中无法正确加载a标签，从而使a标签无法绑定点击事件，跳转失败。

解决办法：在ajax请求的url后面，加上 &num=Math.random()*1000000; 加上随机参数，如此ajax就不会加载n个相同的请求，保证了index_search_content中的数据正确加载。

 

Bug two:

Propertychange与input

在ie中监听input元素变化，可以使用事件propertychange,而chrome中则是input.

但是在iepropertychange中，有个bug。

原因分析：当有个功能为使用上下键移动index_search_content中span时，会将所选择的span中的文字添加到input中，在ie中，这种行为也会认定为是输入框改变，而在chrome中，则只有想input中打字才会认定为是输入框改变。

解决方法：当键盘发生上下操作时，将输入框加上一个数据，如$(‘input’).data(‘editing’,’false’)。在对propertychange进行事件处理时，判断editing的值，为真，则进行ajax的处理，否则不执行ajax处理。