Question

我正在寻找一个2盒可搜索的多选项，沿着这里显示的一行：http://www.jqueryrain.com/?qmi2lw8H但左框填充使用ajax自动完成 - 即你开始输入'abc'和左框填充包含基于jsonp结果的'abc'的所有内容。

到目前为止，我还没有运气，使用下面格式的可用代码

<head>
<!-- BS CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">


<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Multiselect/BS -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://myip/multiselect.js" language="javascript" type="text/javascript"></script>


</head> 
<body>
        <form method="post" name="myForm">
    <div class="row">
    <div class="col-xs-5">
        <select name="from[]" id="search" class="form-control" size="8" multiple="multiple"></select>
    </div>

    <div class="col-xs-2">
        <button type="button" id="search_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
        <button type="button" id="search_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
        <button type="button" id="search_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
        <button type="button" id="search_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
    </div>

    <div class="col-xs-5">
        <select name="to[]" id="search_to" class="form-control" size="8" multiple="multiple"></select>
    </div>
  </div>

<script type="text/javascript">
jQuery(document).ready(function($) {
   var $select = $('#search').multiselect({
        search: {
            left: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
            right: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
        }
    });
$select.multiselect('disable');
$.ajax({
        type: "POST",
        url: "../terms_by_name.php",
        dataType: 'jsonp',
        data: {term: request.term},
        success: function OnPopulateControl(response) {
            list = response.d;
            if (list.length > 0) {
                $select.multiselect('enable');
                $("#search").empty().append('<option value="0">Please select</option>');
                $.each(list, function () {
                    $("#search").append($("<option></option>").val(this['Value']).html(this['Text']));
                });
                $("#search").val(valueselected);
            }
            else {
                $("#search").empty().append('<option selected="selected" value="0">Not available<option>');
            }
          $("#search").multiselect('refresh'); //refresh the select here
        },
        error: function () {
            alert("Error");
        }
    });
});
</script>

</form>

多选框显示，如果我手动将选项放入有效的选项中，但左侧的选项不会从自动完成中填充。我对这些东西很新。我错过了什么？

Answer 1

我通过添加jquery ui库并使用内置的自动完成功能来实现这一点。这是最终的代码：

 <head>
<!-- Multiselect/BS CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

 <!-- jQuery -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!-- Multiselect/BS -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://myip/multiselect.js" language="javascript" type="text/javascript"></script>


</head> 
<body>


    <form method="post" name="myForm">


<div class="row">
    <div class="col-xs-5">
        <select name="from[]" id="search" class="form-control" size="8" multiple="multiple">
        </select>
    </div>

    <div class="col-xs-2">
        <button type="button" id="search_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
        <button type="button" id="search_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
        <button type="button" id="search_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
        <button type="button" id="search_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
    </div>

    <div class="col-xs-5">
        <select name="to[]" id="search_to" class="form-control" size="8" multiple="multiple"></select>
    </div>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
   var $select = $('#search').multiselect({
        search: {
            left: '<input type="text" name="q" id="lefts" class="form-control" placeholder="Search..." />',
            right: '<input type="text" name="q2" class="form-control" placeholder="Search..." />',
        }
    });

    $select.multiselect('disable');
 $( "#lefts" ).autocomplete(
        {source: function (request, response) {
        $.ajax({
        type: "GET",
        url: "http://myip/terms_by_name.php",
        dataType: 'jsonp',
        data: {term: request.term },
        success: function OnPopulateControl(response) {
            list = response;
            if(list.length > 0) {
                $select.multiselect('enable');
                $("#search").empty().append('<option value="0">ALL</option>');
                $.each(list, function () {
                    $("#search").append($("<option></option>").val(this['id']).html(this['value']));
                });
            }
            else {
                $("#search").empty().append('<option selected="selected" value="0">No match<option>');
            }
         $("#search").multiselect('refresh'); //refresh the select here
        },
        error: function () {
            alert("Error");
        }
            });
        },
         minlength: 2
     });
    });
</script>



</form>




</body>

带有ajax的2盒可搜索多选

1 个答案: