正文

类似百度搜索的下拉提示框，复制别人的，改了一下。

author  author  2022-09-18  784

关键词：

jsp代码：在填写上级公司的input框时需要给客户提示已经保存过的相似公司名称，所以在下面加一个id为append的空的div。

<div class="row cl">
　　<label class="form-label col-xs-4 col-sm-2" style="text-align: right;">上级公司：</label>
　　<div class="formControls col-xs-8 col-sm-9">
　　<input type="text" class="input-text" placeholder="注：无上級公司则无需填写" value="${company.temporary}" id="kw" onKeyup="loadCompanyNamejson(this);" style="width:310px">
　　</div>
　　<div

　　 id="append" class="formControls col-xs-8 col-sm-9" style="border:solid #F5F5F5 2px; border-top:1px; text-align: left; display:none; width:310px; margin-left: 198px; overflow-y: auto;height: 100px;">< < /div>
</div>

css样式：乱加的，能看就行

#append{
border-width: 1px 2px 2px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: rgb(245, 245, 245);
border-bottom-color: rgb(245, 245, 245);
border-left-color: rgb(245, 245, 245);
border-image: initial;
border-top-style: initial;
border-top-color: initial;
width: 310px;
margin-left: 198px;
display: none;
height: 100px;
overflow-y: auto;
}

======border:solid #F5F5F5 2px; border-top:1px; text-align: left; display:none; width:310px; margin-left: 198px; overflow-y: auto;height: 130px;"=======

js代码：异步获取搜索提示信息的list，也可以自己写一个提示的字符串数组

function loadCompanyNamejson(obj){
　　if (nameList == null || nameList == undefined) {
　　　　$.ajax({
　　　　type : "POST",
　　　　url : rootpath + "/crm/company/nameJson",
　　　　dataType:"json",
　　　　contentType: "application/json;charset=utf-8",
　　　　data:JSON.stringify(company),
　　　　success : function(data) {

这里是先声明了一个全局的var变量nameList用于储存临时拿来的list
　　　　nameList = data.nameList;
　　　　getContent(obj, nameList);
　　　　},
　　error : function(data) {
　　　　console.log(data);
　　}
});
　　}else {
　　getContent(obj, nameList);
　　}
}

拿到数据后判断一下，调用getContent（）方法。这里的kw是input框的id，上面已经红色标明

function getContent(obj, nameList){
　　var kw = jQuery.trim($(obj).val());
　　if(kw == ""){
　　$("#append").hide().html("");
　　return false;
}

这里需要改一下循环的list后面的直接复制就可以了
var html = "";
for (var i = 0; i < nameList.length; i++) {
　　var nameTemp = nameList[i].name;
　　if (nameTemp.indexOf(kw) >= 0) {
　　html = html + "<div class=‘item companyNameclass‘ onmouseenter=‘getFocus(this)‘ onClick=‘getCon(this);‘>" + nameTemp + "</div>";
　　}
}
　　if(html != ""){
　　　　$("#append").show().html(html);
　　}else{
　　　　$("#append").hide().html("");
　　}
}

======================================================================================

$(function(){
　　$(document).keydown(function(e){
　　e = e || window.event;
　　var keycode = e.which ? e.which : e.keyCode;
　　if(keycode == 38){
　　　　if(jQuery.trim($("#append").html())==""){
　　　　　　return;
　　　　}
　　　　movePrev();
　　　　}else if(keycode == 40){
　　　　　　if(jQuery.trim($("#append").html())==""){
　　　　　　　　return;
　　　　　　}
　　　　$("#kw").blur();
　　　　if($(".item").hasClass("addbg")){
　　　　　　moveNext();
　　　　}else{
　　　　　　$(".item").removeClass(‘addbg‘).eq(0).addClass(‘addbg‘);
　　　　}
　　}else if(keycode == 13){
　　　　dojob();
　　}
});

=============================================================

function getFocus(obj){
　　$(".item").removeClass("addbg");
　　$(obj).addClass("addbg");
}
function getCon(obj){
　　var value = $(obj).text();
　　$("#kw").val(value);
　　$("#append").hide().html("");
}

模糊查询（类似百度搜索框）

很常见的搜索框，很常用，总结一下，怕自己忘了,使用的是原生的js。这是原生写的，代码很简单，重要是思路。主要就是用了一个indexOf()，很简单。越简单的东西越难想到，很多人都会想到用正则去做，这样就舍近求远了... 查看详情

搜索自动提示的简单模拟jquery

使用jQuery实现类似于百度搜索时的自动完成功能，界面效果所示。首先在输入框上注册keyup事件，然后在事件中通过AJAX获取JSON对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当我们点击每一项的时... 查看详情

怎么做百度搜索的下拉框？

1、实现该功能需依赖jquery.js，jquery.autocomplete.js，先引入这两个js包，以及jquery.autocomplete.css样式文件，如图所示。2、该不全插件要结合input元素使用，也就是在input中进行搜索时，会达到自动提示补全的效果，在html文件中定义inp... 查看详情

华为那个关于手机的设备名称改了，怎样看原来的设备名称？

...自己修改。在手机名称下面有个手机型号，把手机型号在百度里查询，就会看到手机名称如果手机型号都不知道在哪里看，那就再设置里面的搜索框里输入型号，检索一下。参考技术A设置里应用把设置数据清除下，就能看到出... 查看详情

搜索关键词的智能提示

...他会给我提示以下搜索提示我尝试着用JavaScript做了一个类似的练习，以下是我用VS2013写的代码，有不对的地方，请不吝赐教。<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><he 查看详情

智能提示solr（suggest）

...中要实现这么一块功能，当输入文字时候。下拉框提示。类似于百度搜索在师出名门的基于lucene的solr搜索引擎中。提供了拼写检查和智能提示这块功能。拼写检查就是用来检查用户输入的检索内容是否存在，假设不存... 查看详情

开启手机百度搜索历史

首先打开百度。2然后打开来的页面中，将我们的鼠标移动到右上角的用户名上。3这时弹出一个下拉列表，这里我们点击选择并打开“个人中心”4进入个人中心页面，这时我们在页面中可以看到"我的搜索”，这就是我们要找... 查看详情

如何让百度收录网站？

让百度搜索引擎收录你自己的网站,这是一件很简单的事情,但也有很多朋友看到别人的网站在百度中都可以搜索到,但自己的却搜索不到,那么今天小编今天就过来说一下,如何把网站注册到百度搜索引擎中吧; 1、在百度中输入"... 查看详情

怎么找相似图

...藏了一些有趣的图片，想查找一下这些图片的来源和一些类似这样的图片，但是不知道如何去找，其实百度就有这个查找功能，一起来试一试吧。材料/工具电脑方法1/4首先用360浏览器打开百度，可以看到搜索框有一个照相机的... 查看详情

怎么用js写一个类似于百度输入框的搜索插件(代码片段)

PS：这次做的这个小插件只是在前端实现，并没有经过数据库。需要用到的的框架：1.bootstrap.css的样式2.Vue.js最终效果如下：JS部分：$(window).click(function()content_data.is_selected=‘N‘;);varcontent_data=blog_classify:‘‘,//分类搜索框classify_da... 查看详情

winform输入搜索提示框的实现

类似图片这样的winform输入搜索提示选择框的实现，要如何做？能给详细的项目代码就更好了，答案满意追加！看清楚问题！废话的不要说，是winform，不是asp.net。来点实际的最实际的就是代码说话！对了是C#语言。在asp.net中用aja... 查看详情

求js文本框输入拼音出现下拉框列表的特效代码就像百度搜索框一样要完整demo可完美迁移。

...母，难道手工打上去并排序么。这其实可以用程序来取。百度找“jsp把汉字转拼音”或者php把汉字转拼音，这些都有现成的函数。做一次2次开发，用个页面接收你输入的关键字取每个拼音首字母，然后输入到数据库关键字表中... 查看详情

搜索历史功能如何打开

...时显示搜索框提示”都选择“不显示”。默认情况下，在百度主页和搜索结果页上方的搜索框都会显示搜索框提示。如果您不希望显示搜索框提示，可以点击提示框右下角的“关闭”链接，之后您只需要重新启动浏览器就能再次... 查看详情

百度搜索提示框

<!doctypehtml><html><head><metacharset="UTF-8"><title>百度搜索提示框</title><style>*{margin:0;padding:0;outline:none;}.search101{width:650px;margin:300pxauto;font-si 查看详情

百度地图信息提示框的修改转

...为博主原创文章，未经博主允许不得转载。一个小项目，百度地图的定制，电脑用的是触摸屏，支持手写输入，中文输入直接调用系统的虚拟键盘，手写输入是参考网上高手写的一个控件。百度的信息提示框里的搜索框里要输入... 查看详情

搜索框左边有下拉菜单，求大牛告诉一下js/jquery+div+css怎么完成这个

写找服务和找服务商这两个选项的就行//记得采纳哦！<select> <option>你好</option> <option>1</option> <option>2</option> <option>3</option></select>参考技术A找到这个... 查看详情

仿百度搜索提示框效果

<!doctypehtml><html><head><metacharset="UTF-8"><title>百度搜索提示框</title><style>*{margin:0;padding:0;outline:none;}.search101{width:650px;margin:300pxauto;font-si 查看详情

百度搜索关键字提示跳转

模拟的百度搜索的搜索栏，输入数据时会在百度库里提取关键词数组，加入到输入框下面的列表中，可以回车跳转，点击跳转 css和html部分 js部分查看详情