Question

这与我之前的问题有关：

how to get autocomplete result come up in existing select list

但是样式显示无效，即。我只使用IE浏览器。我能够解决问题，并能够隐藏跨度内的选项。

但问题现在是假设我为ids输入160我在左选择列表中得到三个选项。现在当我使用'＆gt;＆gt;'时按钮所有隐藏的项目也会移动。如何只选择过滤后的三个选项而不是全部。

我的HTML代码是这样的：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete Extension - Auto Select Option</title>

<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $.fn.hideOption = function () {
            jQuery(this).wrap('<span class="hideOption" style="display: none;" />');
        }

        $.fn.showOption = function () {
            if (jQuery(this).parent('span.hideOption').length)
                jQuery(this).unwrap();
        }
        $("#txtid").on("keyup", function () {
            var val = $(this).val();
            $("#idLeftValues option").each(function () {
                if ($(this).attr("id").indexOf(val) == -1)
                    $(this).hideOption();
                else
                    $(this).showOption();
            });
        });
        $("#btnidLeft").click(function () {
            var selectedItem = $("#idRightValues option:selected ").hasClass("hideOption");
            $("#idLeftValues").append(selectedItem);
        });

        $("#btnidRight").click(function () {
            var selectedItem = $("#idLeftValues option:selected");
            $("#idRightValues").append(selectedItem);
        });

        $("#btnidLeftAll").click(function () {
            $("#idRightValues option").prop('selected', true);
            var selectedItem = $("#idRightValues option:selected");
            $("#idLeftValues").append(selectedItem);
        });

        $("#btnidRightAll").click(function () {
            $("#idLeftValues option").prop('selected', true);
            var selectedItem = $("#idLeftValues option:selected");
            $("#idRightValues").append(selectedItem);
        });
    });
</script>
<style type="text/css">
    .innercontainer > DIV  {
float: left;
padding: 4px;
}

.containerid {
padding: 8px;
float: left;
width:600px;
font-weight:bold;
}

#row3 SELECT, #row3 INPUT[type="text"]  
{
 width: 140px;
}

.lstBtns 
{

width: 30px;
text-align: center;
}

.lbBtn
{
width:25px;
text-align:center;
padding-left:0px;

}
</style>
</head>
<body>
<div  class="contid">
        <span>
           id: 
            <input id="txtid" type="text" /></span>
        <br />
        <div id="row3" class="innercontainer">
            <div>
                <select id="idLeftValues" size="8" multiple>
                    <option id="140546">140546</option>
                    <option id= "150978" >150978</option>
                    <option id= "160968">160968 </option>
                    <option id= "160978">160978</option>
                    <option id= "160988">160988</option>
                    <option id= "170978">170978</option>
                    <option  id= "170979">170979</option>
                    <option  id= "170980">170980</option>
                    <option  id= "170981">170981</option>
                    <option  id= "170982">170982</option>
                    <option  id= "170991">170991</option>
                    <option  id= "170992">170992</option>
                    <option  id= "170993">170993</option>
                </select>
            </div>
            <div class="lstBtns">
                <br />
                <input type="button" id="btnidRight" class="lbBtn" value="&nbsp;&gt;" />
                <input type="button" id="btnidRightAll" class="lbBtn" value="&gt;&gt;" />
                <input type="button" id="btnidLeft" class="lbBtn" value="&nbsp;&lt;" />
                <input type="button" id="btnidLeftAll" class="lbBtn" value="&lt;&lt;" />
            </div>
            <div>
                <select id="idRightValues" size="8" multiple>                      
                </select>
            </div>
        </div>
    </div>

小提琴链接就在这里 http://jsfiddle.net/0808/GumFy/

仅选择未包含在span内的选项以移至下一个选择列表

0 个答案: