Javascript自动完成最小长度2
javascript autocomplete with min length 2
本文关键字:Javascript 更新时间:2023-09-26
我想添加minLength为2的条件。
// global variables
var acListTotal = 0;<br>
var acListCurrent = -1;<br>
var acDelay = 500;<br>
var acURL = null;<br>
var acSearchId = null;<br>
var acResultsId = null;<br>
var acSearchField = null;<br>
var acResultsDiv = null;<br>
function setAutoCompleteto(field_id, results_id, get_url)
{
// initialize vars
acSearchId = "#" + field_id;
acResultsId = "#" + results_id;
acURL = get_url;
// create the results div
$("#auto").append('<div id="' + results_id + '"></div>');
// register mostly used vars
acSearchField = $(acSearchId);
acResultsDiv = $(acResultsId);
// reposition div
repositionResultsDiv();
// on blur listener
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200) });
// on key up listener
acSearchField.keyup(function (e) {
// get keyCode (window.event is for IE)
var keyCode = e.keyCode || window.event.keyCode;
var lastVal = acSearchField.val();
// check an treat up and down arrows
if(updownArrow(keyCode)){
return;
}
// check for an ENTER or ESC
if(keyCode == 13 || keyCode == 27){
clearAutoComplete();
return;
}
// if is text, call with delay
setTimeout(function () {autoComplete(lastVal)}, acDelay);
});
}
// treat the auto-complete action (delayed function)
function autoComplete(lastValue)
{
// get the field value
var part = acSearchField.val();
// if it's empty clear the resuts box and return
if(part == ''){
clearAutoComplete();
return;
}
// if it's equal the value from the time of the call, allow
if(lastValue != part && minLength > 1){
return;
}
// get remote data as JSON
$.getJSON(acURL + part, function (json) {
minLength: 1
// get the total of results
var ansLength = acListTotal = json.length;
// if there are results populate the results div
if (ansLength > 0) {
var newData = '';
// create a div for each result
for (i = 0; i < ansLength; i++) {
newData += '<div class="unselected">' + json[i] + '</div>';
}
// update the results div
acResultsDiv.html(newData);
acResultsDiv.css("display", "block");
// for all divs in results
var divs = $(acResultsId + " > div");
// on mouse over clean previous selected and set a new one
divs.mouseover(function () {
divs.each(function () { this.className = "unselected"; });
this.className = "selected";
})
// on click copy the result text to the search field and hide
divs.click(function () {
acSearchField.val(this.childNodes[0].nodeValue);
clearAutoComplete();
});
} else {
clearAutoComplete();
}
});
}
// clear auto complete box
function clearAutoComplete()
{
acResultsDiv.html('');
acResultsDiv.css("display","none");
}
// reposition the results div accordingly to the search field
function repositionResultsDiv()
{
// get the field position
var sf_pos = acSearchField.offset();
var sf_top = sf_pos.top;
var sf_left = sf_pos.left;
// get the field size
var sf_height = acSearchField.height();
var sf_width = acSearchField.width();
// apply the css styles - optimized for Firefox
acResultsDiv.css("position","absolute");
acResultsDiv.css("left", sf_left - 2);
acResultsDiv.css("top", sf_top + sf_height + 4);
acResultsDiv.css("width", sf_width - 2);
}
// treat up and down key strokes defining the next selected element
function updownArrow(keyCode) {
if(keyCode == 40 || keyCode == 38){
if(keyCode == 38){ // keyUp
if(acListCurrent == 0 || acListCurrent == -1){
acListCurrent = acListTotal-1;
}else{
acListCurrent--;
}
} else { // keyDown
if(acListCurrent == acListTotal-1){
acListCurrent = 0;
}else {
acListCurrent++;
}
}
// loop through each result div applying the correct style
acResultsDiv.children().each(function(i){
if(i == acListCurrent){
acSearchField.val(this.childNodes[0].nodeValue);
this.className = "selected";
} else {
this.className = "unselected";
}
});
return true;
} else {
// reset
minLength: 1;
acListCurrent = -1;
return false;
}
}
我怀疑有人会看这段代码,当你有jQuery插件测试良好,应该使用。像这样的东西可能会有很大的帮助,您可以在这里找到文档。jQuery是免费的,您可以将其用于商业用途。
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 使用php或javascript从facebook相册URL中删除多余的部分
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在JavaScript中将字符串转换为函数引用
- 模糊事件的Javascript测试
- Javascript更改图标
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何使用WCF服务和javascript表单post上传.doc文件
- javascript结合了数组和字典
- 这是什么 ==- javascript 运算符
- 从javascript创建一个列表
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Javascript:selenium Web驱动程序isDisplayed()不工作
- 如何通过ajax刷新JSF填充的javascript变量
- 如何在Javascript中将JSon对象转换为数组
- Javascript生成的表单未提交
- 使用javascript将动态表从一个html页面打印到另一个html页
- 通过javascript重定向html传递php变量