4
回答
jquery ui 的autocomplete
华为云实践训练营,热门技术免费实践!>>>   
提示列表的高度和宽度,都没办法设置,也就是说我设置了值不管用,滚动条也不出现,麻烦,有用过这个插件的大神,解答一下,感激不尽
举报
不给你听
发帖于1年前 4回/254阅

结果不懈的上网寻找答案,终于解决了,这个插件不出现滚动条,无法设置宽高的问题:

首先在javascript里面写上下面的代码,就可以在初始化一个autocomplete时,随意改变宽度和高度了。

$.widget( "ui.autocomplete", $.ui.autocomplete, {
_renderMenu:function( ul, items ){
var that = this;
//以下是设置高,和滚动条
var height=200;
if(null!==this.options.height&&""!=this.options.height&&
typeof(this.options.height) !== "undefined"){
height=this.options.height;
}
$.each( items, function( index, item ) {
that._renderItemData( ul, item );
} );
$(ul).css("max-height",height+"px");
$(ul).css("overflow-y","auto");
//以下是设置宽
if(null!==this.options.width&&""!=this.options.width&&
typeof(this.options.width) !== "undefined"){
this.menu.element.outerWidth(this.options.width);
}
else{
var width=this.element.outerWidth();
this.menu.element.outerWidth(width);
}
}
})

宽高的参数请这样设置

$("#schoolname").autocomplete({
minLength:1,

width:200,//宽度设置

height:300,//高度设置
focus:function(event, ui){
$("#"+event.target.id).val(ui.item.value);
},
select: function( event, ui ) {
$("#schoolcode").val(ui.item.schoolcode);
},
source:function(request,response){
response(getSchoolList(request));
},
});

function autocomplete(id,url){
//清除缓存
var curDate = new Date();
if(url.indexOf("?")!=-1){
url += "&sys_time="+curDate.getTime();
}else{
url += "?sys_time="+curDate.getTime();
}
$(id).autocomplete({
minLength: 1,
source: url
});
}


function splitAutocomplete(id,url){
//清除缓存
var curDate = new Date();
if(url.indexOf("?")!=-1){
url += "&sys_time="+curDate.getTime();
}else{
url += "?sys_time="+curDate.getTime();
}
$(id).bind("keydown", function(event) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
}).autocomplete({
minLength: 1,
source: function(request, response) {
$.getJSON(url, {term: extractLast(request.term)}, response );
if(navigator.appName == "Microsoft Internet Explorer"){ 
       if(navigator.appVersion.match(/6./i)=='6.'){ 
        $("select").css("display","none");
       }
   } 
},
search: function() {
var term = extractLast(this.value);
if ( term.length < 1 ) {return false;}
},
focus: function() {return false;},
select: function(event, ui) {
var terms = split(this.value);
terms.pop();
terms.push(ui.item.value);
terms.push("");
this.value = terms.join(",");
return false;
},
close: function(event, ui) {
//removeIframe("#iframeDivUsedForCoverSelect");
$("select").css("display","block");
}
});
}


function split( val ) {
return val.split( /,|,|;|;\s*/ );
}
function extractLast(term) {
return split(term).pop();
}


function openIframeDiv(parentDivClass) {
//if ($.browser.msie && $.browser.version == '6.0') {
//var top = (document.body.clientWidth)/5;
var height = $("body").height();
var width = $("body").width();
var left = (screen.width-width)/2;
var iframeHtml = '<iframe id="iframeDivUsedForCoverSelect" scrolling="auto" width="'+width+'" height="'+height+'" '
+ 'frameborder="0" framespacing="0" style="left:'+left+';filter:alpha(opacity:0);'
+ 'opacity:0;left:0px;top:0px;position:absolute;z-index:1;"></iframe>';
$(parentDivClass).append(iframeHtml);
//}
}


function removeIframe(iframeDivUsedForCoverSelect) {
// 获取以前的查询窗口对象
var searchObj = $(iframeDivUsedForCoverSelect);
// 如果对应id的组件已经存在则将其删除
if (null != searchObj && typeof (searchObj) != "undefined") {
searchObj.remove();
}
}
// 页面直接调用上面前两个方法就可以了,你试试

试试92find的Autocomplete插件,肯定行,还强大

 

实现一个智能提示功能需要ajax、数据库、jsp/php、算法等很多知识,
如果数据量大,还需要特殊优化
一个小功能,花费太大精力很不划算
92find.com上的一个js插件实现了搜索框自动补全托管服务,
只要一行javascript代码就可以实现百度、淘宝搜索框提示的全部功能
比如:汉字拼音匹配、拼音首字母匹配、模糊搜索、智能容错,还可以自定义提示词汇及其排序权重
花五分钟我的网站就可以部署同百度、淘宝一样强大好用的输入提示功能
同时兼容IE、Firefox、Safari、Chrome、Opera各种浏览器
兼容ios、Android、Windows

顶部