使用Optgroup和jQueryUI Autocomplete Combobox

时间:2015-05-27 02:05:33

标签: javascript jquery jquery-ui combobox autocomplete

我有一个包含分组的下拉框。我想将此选择转换为jQueryUI Autocomplete Combobox。但是,我无法保持格式化。您可以在http://jsfiddle.net/q6k19e9e/1/

处看到选择输出
<select name="person_cb" id="person_cb">
    <option>--select--</option>
    <option alt="Hoffs, Sussana" style="padding-left:10px" value="21329">Hoffs, Sussana</option>
    <option alt="Jones, John" style="padding-left:10px" value="21328">Jones, John</option>
    <option alt="Pace, Adam" style="padding-left:10px" value="21379">Pace, Adam</option>

<optgroup style="padding-left:10px" label="Services">
    <option alt="Vick, Vaporub" selected="selected" style="padding-left:10px" value="63">Vick, Vaporub</option>
</optgroup>

<optgroup label="Administration"></optgroup>
<option alt="Rogers, Jason" style="padding-left:10px" value="21385">Rogers, Jason</option>

<optgroup label="Associate"></optgroup>
<option alt="Mee, David" style="padding-left:10px" value="21373">Mee, David</option>

<optgroup style="padding-left:10px" label="Group Z">
    <option alt="Dailey, Brooke" style="padding-left:10px" value="21346">Dailey, Brooke</option>
</optgroup>

<optgroup style="padding-left:10px" label="Financial">
    <option alt="Smedley, Pat" style="padding-left:10px" value="21394">Smedley, Pat - Director</option>
</optgroup>

<optgroup label="Affairs"></optgroup>
<option alt="Schneller, Beverly" style="padding-left:10px" value="21390">Schneller, Beverly</option>

<optgroup style="padding-left:10px" label="Bunch">
        <option alt="Heard, Ernest" style="padding-left:10px" value="21358">Heard, Ernest</option>
</optgroup>

<optgroup style="padding-left:10px" label="Career">
    <option alt="Jacobs, Patricia" style="padding-left:10px" value="21362">Jacobs, Patricia</option>
</optgroup>

<optgroup label="Auxiliary"></optgroup>
<option alt="Chapman, Keith" style="padding-left:10px" value="21339">Chapman, Keith</option>

<optgroup style="padding-left:10px" label="Store">
    <option alt="Murphy, Catherine" style="padding-left:10px" value="21377">Murphy, Catherine</option>
</optgroup>

<optgroup style="padding-left:10px" label="Events">
    <option alt="Runner, Andrea" style="padding-left:10px" value="21387">Runner, Andrea</option>
</optgroup>

<optgroup style="padding-left:10px" label="Mail">
    <option alt="Smith, Veronica" style="padding-left:10px" value="21395">Smith, Veronica</option>
</optgroup>

<optgroup label="Wilson"></optgroup>
<option alt="Stevens, Mike" style="padding-left:10px" value="33">Stevens, Mike</option>
<option alt="Tasson, Penn" style="padding-left:10px" value="40">Tasson, Penn</option>

<optgroup style="padding-left:10px" label="Planning">
    <option alt="Cisco, Frank - Manager" style="padding-left:10px" value="34">Cisco, Frank</option>
</optgroup>

<optgroup style="padding-left:10px" label="Response">
    <option alt="Wilson, Kyle" style="padding-left:10px" value="32">Wilson, Kyle</option>
    <option alt="Woolridge, Will" style="padding-left:10px" value="35">Woolridge, Will</option>
</optgroup>

<optgroup style="padding-left:10px" label="Training">
    <option alt="Eyer, Matt" style="padding-left:10px" value="80">Eyer, Matt</option>
</optgroup>

0 个答案:

没有答案