我正在visualforce页面中开发自动完成搜索文本框。我想我已经完成了这项工作,但遇到了一些问题。
但是,当在建议列表中选择该值时,它不会绑定/放入搜索文本框。
这是我的剧本
<script>
$(function(){
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderItem: function (ul, item) {
return $("<li>")
.attr("data-value",item.subtecharea)
.append(item.subtecharea)
.appendTo(ul);
},
_renderMenu: function( ul, items ) {
var that = this,
currenttecharea = "";
$.each( items, function( index, item ) {
var li;
if ( item.techarea != currenttecharea ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.techarea + "</li>" );
currenttecharea = item.techarea;
}
li = that._renderItem( ul, item );
});
}
});
$.ajax({
'async': true,
'global': false,
'url': "{!URLFOR($Resource.techareasubtecharea, '/techarea.json')}",
'dataType': "json",
'success': function (data) {
$('#search').catcomplete({
delay: 0,
source: data.attr("#search"),
select: function (event, ui) {
$('#search').val(ui.item.techarea + " => " + ui.item.subtecharea).width(ui.item.techarea.length+ui.item.subtecharea.length * 16);
return false;
}
}).focus();
}
});
})
</script>
插件:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="https://code.jquery.com/jquery-2.2.0.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js">
</script>
<apex:stylesheet value="{!URLFOR($Resource.bootstrapiso, 'bootstrap-iso/bootstrap-iso.css')}"/>