Javascript jQuery自动完成-没有任何样式？

下面是jQuery自动完成代码，它通过一些样式显示结果 。如何删除所有样式属性，使其看起来像原始html下拉列表？如果不可能，是否可以在纯javascript中创建相同的自动完成效果

现有代码：

jQuery UI自动完成-组合框
.自定义组合框{
位置：相对位置；
显示：内联块；
}
.自定义组合框切换{
位置：绝对位置；
排名：0；
底部：0；
左边距：-1px；
填充：0；
}
.自定义组合框输入{
保证金：0；
填充物：5px10px；
}
函数sendvalues（）
{
警惕（）；
}
（函数（$）{
$.widget（“custom.combobox”{
_创建：函数（）{
this.wrapper=$（“”）
.addClass（“自定义组合框”）
.insertAfter（此元素）；
this.element.hide（）；
这是。_createAutocomplete（）；
这是。_createShowAllButton（）；
},
_createAutocomplete:function（）{
var selected=this.element.children（“：selected”），
value=selected.val（）？selected.text（）：“”；
this.input=$（“”）
.appendTo（this.wrapper）
.val（值）
.attr（“标题”、“名称”）
.addClass（“自定义组合框输入ui小部件ui小部件内容ui状态默认ui左角”）
.自动完成({
延迟：0，
最小长度：0，
来源：$.proxy（此“\u来源”）
})
.工具提示({
tooltipClass：“ui状态突出显示”
});
此。_on（this.input{
自动完成选择：功能（事件、用户界面）{
ui.item.option.selected=true；
此._触发器（“选择”，事件{
项目：ui.item.option
});
},
AutoCompleteTechange:“\u RemoveFinValid”
});
},
_createShowAllButton:函数（）{
var input=this.input，
wasOpen=false；
$( "" )
.attr（“tabIndex”，-1）
.attr（“标题”、“显示所有项目”）
.工具提示（）
.appendTo（this.wrapper）
.按钮({
图标：{
主要：“ui-icon-triangle-1-s”
},
文本：false
})
.removeClass（“用户界面角全部”）
.addClass（“自定义组合框切换ui右角”）
.mousedown（函数（）{
wasOpen=input.autocomplete（“小部件”）是（“：可见”）；
})
。单击（函数（）{
input.focus（）；
//如果已经可见，请关闭
如果（打开）{
返回；
}
//将空字符串作为要搜索的值传递，显示所有结果
input.autocomplete（“搜索”和“）；
});
},
_来源：功能（请求、响应）{
var matcher=newregexp（$.ui.autocomplete.escapeRegex（request.term），“i”）；
响应（this.element.children（“option”）.map（函数（）{
var text=$（this.text（）；
if（this.value&（！request.term | | matcher.test（text）））
返回{
标签：文本，
值：文本，
选项：这个
};
}) );
},
_RemoveFinValid:函数（事件，ui）{
//已选择项目，无需执行任何操作
if（ui.item）{
sendvalues（）；
返回；
}
//搜索匹配项（不区分大小写）
var value=this.input.val（），
valueLowerCase=value.toLowerCase（），
有效=错误；
this.element.children（“option”）.each（function（）{
if（$（this）.text（）.toLowerCase（）==valueLowerCase）{
this.selected=valid=true；
返回false；
}
});
//找到一根火柴，没什么可做的
如果（有效）{
返回；
}
//删除无效值
这是输入
.val（“”）
.attr（“标题”，值+“不匹配任何项目”）
.工具提示（“打开”）；
this.element.val（“”）；
这是延迟（函数（）{
this.input.tooltip（“close”）.attr（“title”，”）；
}, 2500 );
this.input.autocomplete（“实例”）.term=“”；
},
_销毁：函数（）{
this.wrapper.remove（）；
this.element.show（）；
}
});
})（jQuery）；
$（函数（）{
$（“#组合框”）.combobox（）；
$（“#切换”）。单击（函数（）{
$（“#组合框”）.toggle（）；
});
});
选择一个。。。
abc
kkk
asf
abasdfsac
kkyk
asgyjf
abftfjvhjc
kkgjk
asnjmf

试试这个

JsFiddle :  [https://jsfiddle.net/kd57ebj7/][1]

使用带有css的html。

您不能“删除所有样式，使其看起来像原始html下拉列表”。您必须添加或修改样式，使其看起来符合您的需要

当你删除CSS时，它看起来不正确的原因是你使用了一个复杂的插件来实现复杂的行为。如果你删除插件的任何部分（特别是像CSS这样的大部分），整个“机器”都会崩溃

您需要做的是添加一些自己的样式来覆盖插件的样式，或者更改插件使用的样式

在我看来，它的外观与“自然”自动完成框的外观最大的区别在于，这个框有浅灰色的背景渐变。如果右键单击该元素并选择“inspect element”，您将看到影响它的所有CSS规则。您只需要找到使其具有该背景的规则

在这种情况下，任何具有类

ui state default

的元素都应该具有背景图像

images/ui-bg\u glass\u 75\u e6e6\u 1x400.png

，该规则来自jquery-ui.css，第866行。因此，您可以找到css规则并修改它以满足您的需要

 <style>
      .custom-combobox {
        position: relative;
        display: inline-block;
      }
      .custom-combobox-toggle {
        position: absolute;
        top: 0;
        bottom: 0;
        margin-left: -1px;
        padding: 0;
        height:17px;
        background:transparent;
        border-radius:0px;
      }
      .custom-combobox-input {
        margin: 0;
        padding: 0px 0px;
        width:150px;height:17px;
        background:transparent;
        border-radius:0px;
      }
      .ui-menu .ui-menu-item {
        position: relative;
        margin: 0;
        padding: 0px 0em 0px 0em;
        cursor: pointer;
        min-height: 0;
     background:transparent;
    }
      </style>