2016-07-11 11 views
0

ここに表示されている行の2行の検索可能なマルチセレクションを探しています:http://www.jqueryrain.com/?qmi2lw8Hですが、左側のボックスにajaxオートコンプリートを使用することができます。 jsonpの結果に基づいて 'abc'を含むすべてのものをボックスに埋めます。2ボックス検索可能なAJAX付きマルチ選択

私はこれまで複数選択ボックスが表示され、私はそれが作品の選択に手動でオプションをつけた場合、しかし、1つ

<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> 

下の形式で利用可能なコードを使用して、任意の運を持っていなかった

左のオートコンプリートからは入力されません。 私はこのことにかなり新しいです。私は何が欠けていますか?

+0

私は "request.term"を割り当てる必要があることを認識しています。私は左側の入力フィールドにIDを割り当てようとしましたが、getelementbyid()を使用して値を返しますが、値は返しませんでした。 – Bobert123

+0

私はこれを削除しました。これはわかりません: $( "#search"選択された値); ASP.NETを使用していないので、 "response.d"を "response"に変更しました – Bobert123

+0

ajaxタイプをGETに変更し、以下の行を変更しました: $( "#search")。append .val(this ['id']).html(this ['value'])); これは、私がハードウェアにrequest.term値 – Bobert123

答えて

0

jquery ui libraryを追加し、組み込みのオートコンプリート機能を使用して、これを実現しました。ここに最終コードがあります:

<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> 
関連する問題