自动完成从头开始的文本框
auto complete textbox from scratch
我正在使用javascript和jquery从头开始编写自动完成输入控件。我知道我可以使用jquery自动完成。但是那样就不会有任何乐趣了。
到目前为止,我的自动补全显示了建议,但我无法使用鼠标选择建议。我该怎么做呢?
到目前为止,我的代码是html,
<div class="sug">
<input type="text" id="auto" onkeyup="display(event)" onblur="hide()" autocomplete="off" />
<div class="suggestion" id="suggestion">
</div>
</div>
和下面是样式表
<style>
.suggestion
{
border:solid 2px black;
}
.sug > .suggestion
{
display:none;
}
.sug > .suggestion,#auto
{
width:100px;
}
}
</style>
和我的javascript代码如下
<script type="text/javascript">
var array = new Array();
array.push("heena");
array.push("bhawin");
array.push("aruna");
array.push("mahesh");
array.push("answershul");
array.push("jagruti");
array.push("neha");
array.push("sherry");
array.push("sonali");
var data;
var id; //for providing id to each div
function display(e)
{
if (e.keyCode == 38 || e.keyCode == 40)
{
selectit(e);
}
data = "";
id = 0;
var state = $('#auto').val();
if (state == "")//value empty
{
$('.suggestion').css({ display: "none" });
}
else
{
for (var i = 0; i < array.length; i++)
{
var key = 0;
for (j = 0; j < state.length; j++)
{
//for the matching of the array element with the text in the textbox
if (array[i][j] == state[j])
{
key++;
}
}
//putting the matched array element in a div
if (key == state.length)
{
//the whole array will be copied with the bold values inserted
var bolde = "";
for (var k = 0; k < key; k++)
{
bolde += "" + array[i][k] + "";
}
for (var l = key; l < array[i].length; l++)
{
bolde += array[i][l];
}
id++;
data += "<div id='" + id + "'>" + bolde + "</div>";
}
}
$('.suggestion').html(data);
$('.suggestion').css({ display: "block" });
selectit(e);
if (data == "")
{
$('.suggestion').css({ display: "none" });
}
}
}
function hide()
{
$('#suggestion').css({ display: "none" }); ;
}
function selectit(e)
{
var child = document.getElementById("suggestion").childNodes;
for (var i = 0; i < child.length; i++)
{
if (child[i].id == "1")
{
child[i].style.color = "red"; //here is the problem in the code
}
}
}
</script>
谢谢
有两个问题
: 你需要从onblur
中取下hide();
<div class="sug">
<input type="text" id="auto" onkeyup="display(event)" autocomplete="off" /><!--i changed here to Note the on blur-->
<div class="suggestion" id="suggestion">
</div>
</div>
TWO:设置div的onclick
并在其中使用hide();
<script>
var array = new Array();
array.push("heena");
array.push("bhawin");
array.push("aruna");
array.push("mahesh");
array.push("answershul");
array.push("jagruti");
array.push("neha");
array.push("sherry");
array.push("sonali");
var data;
var id;
function display(e)
{
if (e.keyCode == 38 || e.keyCode == 40)
{
selectit(e);
}
data = "";
id = 0;
var state = $('#auto').val();
if (state == "")
{
$('.suggestion').css({ "display": "none" });
}
else
{
for (var i = 0; i < array.length; i++)
{
var key = 0;
for (j = 0; j < state.length; j++)
{
if (array[i][j] == state[j])
{
key++;
}
}
if (key == state.length)
{
var bolde = "";
for (var k = 0; k < key; k++)
{
bolde += "" + array[i][k] + "";
}
for (var l = key; l < array[i].length; l++)
{
bolde += array[i][l];
}
id++;
data += '<div id="' + id + '" onclick="$(''#auto'').val(this.innerHTML);hide();" >' + bolde + "</div>";// i changed here note the on click
}
}
$('.suggestion').html(data);
$('.suggestion').css({ "display": "block" });
selectit(e);
if (data == "")
{
$('.suggestion').css({ "display": "none" });
}
}
}
function hide()
{
$('#suggestion').css({ "display" : "none" }); ;
}
function selectit(e)
{
var child = document.getElementById("suggestion").childNodes;
for (var i = 0; i < child.length; i++)
{
if (child[i].id == "1")
{
child[i].style.color = "red";
}
}
}
</script>
相关文章:
- 从头开始创建XLS文件
- 水平视差滚动从头开始-没有插件(jQuery)
- B从头开始加密
- d3.js力布局图:如何从头开始构建nodes对象
- Regex正在从头开始删除哈希
- 如何连续运行计时器?(当你刷新时,不要从头开始)
- 使用JQuery的图像滑块不显示我选择的下一个图像,而是从头开始显示
- 从头开始的Javascript动画
- 避免在重新激活视图时从头开始重新渲染闪光对象
- 如何从头开始制作时钟对象(Javascript)
- 引导轮播 不要从头开始
- 从头开始创建 JQuery UI 小部件
- Javascript-从头开始搜索字符串
- 从头开始在NodeJ中编写JSON验证
- 从数组(切片)中提取x个项目,但如果到达末尾,则从头开始继续
- 从头开始构建 DICOM 解析器
- 从头开始在正文中定义警报变量
- 尝试从头开始使用Javascript创建each()类型的jQuery函数
- 从头开始动画gif
- 自动完成从头开始的文本框