Baidu 입력 상자 스마트 프롬프트_javascript 기술을 모방하는 js 코드

최근 고객의 요구 사항이 바뀌고 있는데 그 중 일부는 고객의 긴급한 요청으로 인해 빠르게 완료할 수 없어서 먼저 프로토타입을 제작한 후 나중에 천천히 수정했습니다. 예를 들어 프로토타입에 드롭다운 목록을 만들었는데 실제로는 200개가 넘는 데이터가 있습니다. 드롭다운 목록을 사용하는 것은 비현실적입니다. 그리고 드롭다운 목록은 얼마나 길어야 합니까? 그래서 자연스럽게 바이두의 스마트 프롬프트 기능이 떠올랐습니다.

이전에 잊어버린 내용을 언급했는데, 독자들이 이해하기 쉽도록 모든 데이터를 js에 넣었습니다.

전체 코드를 전달해 보겠습니다. 길지 않습니다. 테스트하기 전에는 어떤 영웅이 썼는지 잊어버렸는데, 간단하게 설명하기 위해 모든 데이터를 js로 설정하여 독자들이 이해하기 쉽도록 했습니다.

코드 복사 코드는 다음과 같습니다. .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); } });

lt; /script> >

코드를 복사할 때 jquery를 꼭 지참하세요. 그렇지 않으면 실수하면 엄마를 또 혼내야 합니다...

주요 아이디어에 대해 이야기해보겠습니다.

먼저 데이터를 js 배열로 만든 다음 배열을 탐색하고 각 데이터 조각에 대한 div를 생성한 다음 auto_div div에 추가합니다. 또한 강조 표시 위로 마우스를 이동하도록 설정하고 다른 위치로 이동합니다. 정상으로 돌아가서 클릭하십시오. 웹 페이지에서 마우스를 클릭하면 텍스트 상자가 자동으로 채워지고, 웹 페이지에서 마우스를 클릭하면 목록 상자가 사라집니다. 물론 주의해야 할 세부 사항이 더 있습니다. , 여기에 단지 예가 있습니다. 텍스트 상자의 텍스트가 변경되면 AutoComplete 이벤트를 어떻게 트리거합니까? onchange를 사용하시겠습니까? 잘못되었습니다. onchange는 텍스트 상자가 커서를 잃으면 트리거되므로 keyup 이벤트를 사용하는 것이 좋습니다.

더 말할 것도 없이 코드는 이해하기 어렵지 않고 원리도 매우 간단합니다. 한 가지 강조하고 싶은 점은 이러한 스마트 프롬프트 기능을 사용하면 일부 초보자는 퍼지 검색을 사용할 수도 있다는 것입니다. 텍스트 상자의 텍스트가 변경되면 데이터베이스를 확인하고 반환된 데이터를 나열하는 것은 좋지 않습니다. 이것이 실제로 가능하기 때문에 그가 틀렸다고 말하지는 않겠지만, 마치 내가 뭔가를 원할 때마다 물어봐야 하는 것처럼 텍스트가 변경될 때마다 데이터베이스에 너무 많은 부담을 줄 것입니다. 그것은 당신에게 더 좋습니다. 한꺼번에 모두 주면 내가 원하는 것을 선택할 수 있습니다. 물론 모든 것에는 양면이 있습니다. 모든 데이터를 한 번에 확인하면 메모리가 소모됩니다. 이는 빅 데이터에는 권장되지 않습니다. 대부분의 상황은 빅 데이터가 아니기 때문입니다.

마지막으로 소감을 말씀드리겠습니다. 예전에 프론트엔드 엔지니어로 인터뷰를 했을 때 사람들은 제가 아직 어리다고 생각했습니다. 이제 저는 프론트엔드 분야에서 점점 더 강해지기 시작했습니다. 비록 회사에 프론트엔드 엔지니어가 없지만, 일부 문제를 해결하려면 프론트엔드를 합리적으로 사용해야 한다고 생각합니다. 외부에 맡기지 않고 프런트엔드에서 쉽게 해결할 수 있는 문제입니다. 회사에서 일하면서 남들한테는 많이 배우지 못했는데, 수요가 들어오자 나만의 해결책을 찾아내고 온라인에서 해결책을 찾게 되었고, 저도 많은 것을 배웠습니다. 계속하세요, 어서!