SharePoint list drop-down box optimization

Because the drop-down box for the SharePoint list is not searchable,

Customer experience is very bad, took a day to encapsulate the JS code, the actual following

(Automatically generate a text box above the SharePoint list, similar to the Baidu form search dropdown box content, select the drop-down box to automatically select the contents of the text box selection)

Actual code

Just add the following JS code to the list page. Add a reference, Baidu search AutoComplete can

"Hecdepartment" and "oadepartment" are the internal names of the drop-down boxes. You need to change these two to use

<script src= "Jquery-1.9.1.min.js" type= "Text/javascript" ></script>
<link href= "Jquery.autocomplete.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Jquery.autocomplete.js" type= "Text/javascript" ></script>

<script type= "Text/javascript" >
$ (function () {
var selects = document.getElementsByTagName ("select");
$.each (selects, function () {
if ($ (this). attr ("title") = = "Hecdepartment")
{
$ (this). Parent (). Parent (). Parent (). Before ("<tr><td></td><td><input type=\" text\ "id=\ "Txtheckey\" style=\ "width:535px;\"/><td></tr> ");
var selvalue = []; Defines an empty array to receive all the values of select option
var select=$ (this);
var options = $ (this). Find ("option"); All option under Select
for (Var i=1;i<options.length;i++) {
Selvalue.push (Options.eq (i). text ());
}
$ (' #txtHECKey '). AutoComplete (selvalue). Result (function (event, data) {
for (Var i=1;i<options.length;i++) {
if (Options.eq (i). Text () ==data)
{
Select.val (Options.eq (i). Val ());
}
}
})

}
else if ($ (this). attr ("title") = = "Oadepartment")
{

$ (this). Parent (). Parent (). Parent (). Before ("<tr><td></td><td><input type=\" text\ "id=\ "Txtoakey\" style=\ "width:535px;\"/><td></tr> ");
var selvalue = []; Defines an empty array to receive all the values of select option
var select=$ (this);
var options = $ (this). Find ("option"); All option under Select
for (Var i=1;i<options.length;i++) {
Selvalue.push (Options.eq (i). text ());
}
$ (' #txtOAKey '). AutoComplete (selvalue). Result (function (event, data) {
for (Var i=1;i<options.length;i++) {
if (Options.eq (i). Text () ==data)
{
Select.val (Options.eq (i). Val ());
}
}
})
}
})

})
</script>

<style type= "Text/css" >
#txtKey
{width:300px;}
</style>

SharePoint list drop-down box optimization