Question

我正在使用this方法加载我的数据：

这是我的代码

<script>
    $(function() {
        function log( message ) {
            $( "<div/>" ).html( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        }


        $.ajax({
            url: "countries.xml",
            dataType: "xml",
            success: function( xmlResponse ) {
                var data = $( "geoname", xmlResponse ).map(function() {
                    return {
                        name: ( $.trim( $( "name", this ).text() ) ),
                        number: ( $.trim( $( "number", this ).text() ) || undefined ),
                        icon: ( $.trim( $( "icon", this ).text() ) || undefined ),

                        value: $( "name", this ).text() + " " ,

                        zip: $( "zip", this ).text()

                    };
                }).get();
                console.log(data);
                $( "#birds" ).autocomplete({
                    source: data,
                    minLength: 0,
                    select: function( event, ui, icon ) {
                        console.log(ui.item);
                        log( ui.item ?
                            "Selected: " + ui.item.value + ", zip: " + ui.item.zip :
                            "Nothing selected, input was " + this.value );
                        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

                        if(ui.item) {
                            $.ajax({
                                url: "results.xml",
                                dataType: "xml",
                                success: function( xmlResponse ) {
                                    var items = $( "geoname", xmlResponse ).map(function() {
                                        if(ui.item.name == $.trim( $( "country", this ).text() )) {
                                            return {
                                                name: ( $.trim( $( "name", this ).text() ) || undefined ),
                                                country: ( $.trim( $( "country", this ).text() ) || undefined ),
                                                price: ( $.trim( $( "price", this ).text() ) || undefined ),
                                                price2: ( $.trim( $( "price2", this ).text() ) || undefined ),
                                                planprice: ( $.trim( $( "planprice", this ).text() ) || undefined ),
                                                plandisplay: ( $.trim( $( "plandisplay", this ).text() ) || undefined ),
                                                icon: ( $.trim( $( "icon", this ).text() ) || undefined ),

                                                actionurl:  ( $.trim( $( "actionurl", this ).text() ) || undefined ),
                                                text:  ( $.trim( $( "text", this ).text() ) || undefined ),
                                                value: $( "name", this ).text() + ", " +

                                                    ( '('+$.trim( $( "zip", this ).text()+')' ) || "(unknown country)" ),

                                                zip: $( "zip", this ).text()
                                            };
                                        }
                                    }).get();
                                    // $( "#log" ).html('');
                                    log('<hr/>');
                                    $.each(items, function(index, obj) {
                                        var str = ('<span style="color:#666;font-weight:bold;font-size:17px;">')+obj.name+('</span>')+":"+obj.price+"c&nbsp;&nbsp;"+('<strong>')+obj.price2+"c&nbsp;&nbsp;(incl.VAT)"+obj.plandisplay+obj.planprice;
                                        log(str);

                                        // console.log(arguments);
                                    });
                                }
                            });
                        } else {
                            log( "Nothing selected, input was " + this.value );
                        }
                    }
                });
            }
        });
    });
</script>

<input id="birds" placeholder="Country name"  />
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" />


<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">

    <div id="log" style=" overflow: auto; border-width: 0;" class="ui-widget-content"></div>
</div>

如果每次进行新搜索时都检查jquery的XML示例，旧结果仍然存在，新结果将显示在顶部。

如何清除每次搜索的结果？

每次搜索都是unigue

Answer 1

您可以重置close事件处理程序选项中的值：

任何jQueryUI回调中的

this都是指原始选择器中元素的实例

$("#birds").autocomplete({
    source: data,
    minLength: 0,
    select: function (event, ui, icon) {
        /* do stuff with selection*/
    },
    close: function () {
         this.value='';
         /* OR $(this).val('')*/
    }

})

DEMO：http://jsfiddle.net/ZcHgY/

替代方法是保留值并使用像mousedown这样的鼠标事件处理程序来清除值

Answer 2

您可以使用

清除<div id="log">的HTML内容

$( "#log" ).html ="";

在添加新结果之前

jQuery Autocomplete在新搜索中清除旧结果

2 个答案: