jquery ui autocomplete click event handler

Question

i can't figure out how to make select method for the jquery ui autocomplete library work. i've tried to put together a test case, but for some reason (xsrf?) the test isn't bringing results. my problem isn't getting results and displaying them (that works fine when i make the request on the same domain), my problem is that, after i get the results in a drop down menu, nothing happens when i click on one of the results.

test.js

<html><body>

<script type="text/javascript" src="./jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="./jquery-ui-1.8.17.custom.min.js"> </script>
<link rel="stylesheet" href="./jquery-ui.css" />
<script type="text/javascript" >

    var cwJQ = jQuery.noConflict();

    cwJQ(document).ready(function() {

        $input = cwJQ('input#last_name');

        var renderItemOverride = function (ul, item) {
                return cwJQ("<li></li>")
                        .data("item.autocomplete", item)
                        .append( item.label )
                        .appendTo(ul);
        };

        $input.autocomplete( {  
                source: function( req, res ) {
                        cwJQ.ajax( {
                                url: 'http://news.google.com/news/search',
                                dataType: 'html',
                                data: {  "q": req.term
                                },
                                success: function(data) {
                                        var datum = new Array;
                                        cwJQ(data).find('a').each( function( i, val ) {
                                                datum.push( "<span name='li-span'>" + cwJQ( val ).text() + "</span>" );
                                        } );
                                        res( datum );
                                }
                        } )
                },
                select: function( event, ui ) {
                        alert();console.log();
                },
                minLength: 2
        } ).data('autocomplete')._renderItem = renderItemOverride;

        cwJQ("#li-span").live( 'click', function() {
                console.log( this );
        } );
    });

</script>

        <form> 
                <label class="autocomplete weight-normal">By last name</label>
                <input type="text" name="last_name" size="35" class="width-full" id="last_name" />
        </form>

</body></html>

jquery-ui.css

.ui-menu {
        padding: 0px;
        background-color: #FFF;
        overflow: hidden;
}

ul.ui-menu {
        display: block;
        list-style-position: outside;
        list-style: none;
        padding: 0;
        margin: 0;
        border: 1px solid #998F87;
        overflow: auto;
        max-height: 200px;
        width: 200px;
}

ul.ui-menu li {
        margin: 0px;
        padding: 3px 5px;
        cursor: pointer;
        display: block;
        font-size: 12px;
        overflow: hidden;
}

span#undefined {
        display: block;
        background-color: #ffff00;
        width: 100%;
        margin: 0;
}

ul.ui-menu li:hover { background: #ff00ff; }

EDIT

The working code is:

    var cwJQ = jQuery.noConflict();

cwJQ(document).ready(function() {

    $input = cwJQ('input#last_name');

    $input.autocomplete( {
        source: function( req, res ) {
            cwJQ.ajax( {
                url: 'url',
                dataType: 'html',
                data: {  "name": req.term,
                    "name_in_id": 1
                },
                success: function(data) {
                    var datum = new Array;
                    cwJQ(data).find('li').each( function( i, val ) {
                        datum.push( { value: cwJQ( val ).text(), id: val.id.split('_')[1] } );
                    } );
                    res( datum );
                }
            } )
        },
        select: function( event, ui ) {
                            if( ui.item.id != undefined ) {
                addMemDat( ui.item.id, ui.item.value );
            }
        },
        search: function() {
            cwJQ( this ).addClass("auto_complete_loading");
        },
        open: function(event, ui){
            cwJQ( this ).removeClass("auto_complete_loading");
        },
        close: function() {
            $input.val('');
        },
        minLength: 2
    } ).data( "autocomplete" )._renderItem = function( ul, item ) {
    return cwJQ( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a><span id='" + item.id + "'>" + item.value + "</span></a>" )
        .appendTo( ul );
    };
});

ie, the _renderItem override was not correct (but there's also the add/remove of the autocomplete class with some simple css to display a spinner in the input box while results are being retrieved.

lifeIsGood · Accepted Answer · 2012-02-21 00:02:08Z

2

Adding to Dmitry's reply - you might need to change

   select: function( event, ui ) {
                    alert();
   }

to

  select: function( event, ui ) {
                    alert(ui.item.value);
  }

answered Feb 21, 2012 at 0:02

lifeIsGood

1,2291 gold badge15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dmitry Nogin · Accepted Answer · 2012-02-20 23:52:52Z

1

Can you try this:

  datum.push({ value: "<span name='li-span'>" + cwJQ( val ).text() + "</span>" });

instead of this:

  datum.push( "<span name='li-span'>" + cwJQ( val ).text() + "</span>" );

It works for me...

answered Feb 20, 2012 at 23:52

Dmitry Nogin

3,7601 gold badge22 silver badges36 bronze badges

2 Comments

ag4ve Over a year ago

hummm, that didn't exactly work. however, it got me to remove the code to override the _renderItem method and now the select method seems to work.

ag4ve Over a year ago

well, it seems that i can push { value: blah, id: blah } and get access to it instead of putting the id in a span and the like. messes with the css a bit, but i think i can work with this. thanks all.

Collectives™ on Stack Overflow

jquery ui autocomplete click event handler

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related