i can't figure out how to make select method for the jquery ui autoplete 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.autoplete", item)
.append( item.label )
.appendTo(ul);
};
$input.autoplete( {
source: function( req, res ) {
cwJQ.ajax( {
url: '',
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('autoplete')._renderItem = renderItemOverride;
cwJQ("#li-span").live( 'click', function() {
console.log( this );
} );
});
</script>
<form>
<label class="autoplete 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.autoplete( {
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_plete_loading");
},
open: function(event, ui){
cwJQ( this ).removeClass("auto_plete_loading");
},
close: function() {
$input.val('');
},
minLength: 2
} ).data( "autoplete" )._renderItem = function( ul, item ) {
return cwJQ( "<li></li>" )
.data( "item.autoplete", 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 autoplete class with some simple css to display a spinner in the input box while results are being retrieved.
i can't figure out how to make select method for the jquery ui autoplete 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.autoplete", item)
.append( item.label )
.appendTo(ul);
};
$input.autoplete( {
source: function( req, res ) {
cwJQ.ajax( {
url: 'http://news.google./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('autoplete')._renderItem = renderItemOverride;
cwJQ("#li-span").live( 'click', function() {
console.log( this );
} );
});
</script>
<form>
<label class="autoplete 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.autoplete( {
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_plete_loading");
},
open: function(event, ui){
cwJQ( this ).removeClass("auto_plete_loading");
},
close: function() {
$input.val('');
},
minLength: 2
} ).data( "autoplete" )._renderItem = function( ul, item ) {
return cwJQ( "<li></li>" )
.data( "item.autoplete", 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 autoplete class with some simple css to display a spinner in the input box while results are being retrieved.
Share Improve this question edited Feb 22, 2012 at 20:36 ag4ve asked Feb 20, 2012 at 23:43 ag4veag4ve 1272 silver badges9 bronze badges 02 Answers
Reset to default 2Adding to Dmitry's reply - you might need to change
select: function( event, ui ) {
alert();
}
to
select: function( event, ui ) {
alert(ui.item.value);
}
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...