CODEWITHSUNDEEP
jqueryajax
John Brown
John Brown

Reputation: 39

jQuery Autocomplete clear old results on new search

I am using this method to load my data:

Here is my code

<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>

If you check in jquery's example for XML every time you make a new search the old results are still there and the new results will display in the top.

How can I clear the results on every search?

Every search will be unigue

Upvotes: 1

Views: 6843

Answers (2)

Ahmed Abdelrazik
Ahmed Abdelrazik

Reputation: 85

you can clear the HTML content of <div id="log"> by using 

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

before adding new result

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

You could reset the value within the close event handler option:

this within any jQueryUI callback refers to instance of element in original selector

$("#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/

Alternative would be to leave the values and use a mouse event handler like mousedown to clear the value

Upvotes: 2

Related Questions