jquery input输入自动补全
程序员文章站
2022-03-03 19:52:07
...
html:
<input type="text" id="BillUser" value="" size="10" />
js
//数组
var GoodsTyoeList = ["1111","2222","321321","wa王"];
//调用
autoShowGoodsName(GoodsTyoeList, '#BillUser');
//样式
function createstyle(css) {
var mystyle = $('#mystyle');
if (!mystyle.length > 0) {
var style = "<style id='mystyle'></style>";
$(document).find('head').append(style);
mystyle = $('#mystyle');
}
mystyle.append(css);
}
//绑定加点击方法
function autoShowGoodsName(users, id) {
// id = id || "#valueTT";
var wd = 146;// $(id)[0].clientWidth;
var hg = 31;//$(id)[0].clientHeight;
var suggest = '<ul class="suggest" style="z-index: 999999;display: none;position:absolute;width: ' + wd + 'px; background-color: white;padding: 0px;margin:0px;"></ul>';
var css_li = ".suggest li{display: block;height:" + hg + ";font: 14px/25px '微软雅黑','黑体',sans-serif;margin: 0px;color:rgb(66, 139, 202);text-align: left;padding:1px}";
css_li += ".suggest li:hover{cursor: pointer;margin: 0px;background-color: rgb(227,227,227);}";
$(id).after(suggest);
createstyle(css_li);
$(id).bind('keyup click', function (e) {
var name = $(this).val();
var num = 0;
if (name != '') {
var html = '';
for (var i = 0; i < users.length; i++) {
if (users[i].indexOf(name) > -1) {
html += "<li>" + users[i] + "</li>";
num++;
}
if (num > 9) {
break;
}
}
if (html != '') {
$('.suggest').show();
$('.suggest').html(html);
$('.suggest li').css(css_li);
$('.suggest li').bind('click', function (e) {
$(id).val($(e.target).html());
$('.suggest').hide();
});
}
} else {
$('.suggest').hide();
}
});
$(id).blur(function () {
setTimeout(function () {
$('.suggest').hide();
}, 150);
})
}