js code that imitates Baidu input box smart prompt_javascript skills

Customer demands have been changing recently, but some of them were due to urgent requests from customers, so I couldn’t finish it quickly, so I made a prototype for them first, and then slowly modified it later. For example, I made a drop-down list for them in the prototype. In fact, they have more than 200 pieces of data. It is unrealistic to use a drop-down list. How can you find so much? And how long should that drop-down list be? So naturally, I thought of Baidu’s smart prompt function.

I referred to what I forgot to write before. He used Baidu API. For the sake of simplicity, I put all the data in js, so that it would be easier for readers to understand.

Let’s pass the entire code, it’s not long. Before I took the test, I forgot which hero wrote it. He used Baidu API. For the sake of simplicity, I set all the data in js, so that it would be easier for the readers to understand.

Copy code The code is as follows: .search { left: 0; position: relative; } #auto_div { display: none; width: 300px; border: 1px #74c0f9 solid; background: #FFF; position: absolute; top: 24px; left: 0; color: #323232; } //测试用的数据 var test_list = ["小张", "小苏", "小杨", "老张", "老苏", "老杨", "老爷爷", "小妹妹", "老奶奶", "大鹏", "大明", "大鹏展翅", "你好", "hello", "hi"]; var old_value = ""; var highlightindex = -1; //高亮

//自动完成 function AutoComplete(auto, search, mylist) { if ($("#" + search).val() != old_value || old_value == "") { var autoNode = $("#" + auto); //缓存对象（弹出框） var carlist = new Array(); var n = 0; old_value = $("#" + search).val();

for (i in mylist) { if (mylist[i].indexOf(old_value) >= 0) { carlist[n++] = mylist[i]; } } if (carlist.length == 0) { autoNode.hide(); return; } autoNode.empty(); //清空上次的记录 for (i in carlist) { var wordNode = carlist[i]; //弹出框里的每一条内容

var newDivNode = $(" ").attr("id", i); //设置每个节点的id值 newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");

newDivNode.html(wordNode).appendTo(autoNode); //追加到弹出框

//鼠标移入高亮，移开不高亮 newDivNode.mouseover(function () { if (highlightindex != -1) { //原来高亮的节点要取消高亮（是-1就不需要了） autoNode.children("div").eq(highlightindex).css("background-color", "white"); } //记录新的高亮节点索引 highlightindex = $(this).attr("id"); $(this).css("background-color", "#ebebeb"); }); newDivNode.mouseout(function () { $(this).css("background-color", "white"); });

//鼠标点击文字上屏 newDivNode.click(function () { //取出高亮节点的文本内容 var comText = autoNode.hide().children("div").eq(highlightindex).text(); highlightindex = -1; //文本框中的内容变成高亮节点的内容 $("#" + search).val(comText); }) if (carlist.length > 0) { //如果返回值有内容就显示出来 autoNode.show(); } else { //服务器端无内容返回 那么隐藏弹出框 autoNode.hide(); //弹出框隐藏的同时，高亮节点索引值也变成-1 highlightindex = -1; } } }

//点击页面隐藏自动补全提示框 document.onclick = function (e) { var e = e ? e : window.event; var tar = e.srcElement || e.target; if (tar.id != search) { if ($("#" + auto).is(":visible")) { $("#" + auto).css("display", "none") } } }

}

$(function () { old_value = $("#search_text").val(); $("#search_text").focus(function () { if ($("#search_text").val() == "") { AutoComplete("auto_div", "search_text", test_list); } });

>

When you copy the code, remember to bring jquery with you, otherwise you will have to scold your mother again if you make a mistake...

Let’s talk about the main ideas.

First, make the data into a js array, then traverse the array, generate a div for each piece of data, and then add it to the auto_div div. Also set the mouse to move over the highlight, move it away to return to normal, and click The text box will be automatically filled in when the mouse is clicked on the web page, and the list box will disappear when the mouse is clicked on the web page - of course there are more details to pay attention to, here is just an example. How to trigger the AutoComplete event when the text in the text box changes? Use onchange? Wrong, onchange is triggered when the text box loses the cursor, so it is better to use the keyup event.

Not much else to say, the code is not difficult to understand and the principle is also very simple. One thing I want to emphasize is that with this kind of smart prompt function, some novices may think of using fuzzy search. When the text in the text box changes, they check the database and list the returned data - this is not good. I won't say that he is wrong because this is indeed feasible, but it will cause too much burden on the server. Every time the text is changed, the database is checked, as if I have to ask you every time I want something. It is better for you Give them all to me at once and I can choose what I want. Of course, everything has two sides. Checking out all the data at once will consume memory. This is not recommended for big data. This approach is suitable for most situations, because most situations are not big data - big data. Think of it.

Finally, let me talk about my feelings: I interviewed as a front-end engineer before. At that time, people thought I was still young. Indeed, I was very young at that time. Now, I am starting to become stronger in the front-end field. Although the company does not have front-end engineers, I still think the front-end is very important. I need to use the front-end reasonably to solve some problems that can be easily solved with the front-end instead of leaving it to the outside world. Processed in the background. While working in the company, I didn’t learn much from others, but when the demand came, I figured out my own solutions and found some solutions online, and I also learned a lot. Keep doing it, come on!