2 Box durchsuchbar Multiselect mit Ajax

Ich suche eine 2 Box durchsuchbare Multiselect in der Richtung der hier gezeigten: http://www.jqueryrain.com/?qmi2lw8H aber mit der linken Box fill-fähig mit Ajax Autocomplete - dh Sie beginnen zu tippen 'abc' und die linke füllen Sie alles mit 'abc' basierend auf den jsonp-Ergebnissen.2 Box durchsuchbar Multiselect mit Ajax

Ich habe kein Glück so weit mit dem verfügbaren Code im Format unter

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

hatte

der Multiselect-Boxen-Display, und wenn ich Put-Optionen manuell in die select, das funktioniert, aber einem auf der linken Seite füllt nicht von der Autovervollständigung. Ich bin ziemlich neu in diesem Zeug. Was vermisse ich?

Quelle

2016-07-11 Bobert123

ich merke, dass ich die "request.term" zuweisen muss. Ich habe versucht, eine ID auf der linken Seite Eingabefeld zuweisen und Getementbyid(). Wert, um den Wert, aber kein Glück – Bobert123

Ich löschte dies, was ich nicht verstehe: $ ("# search"). val (Wert ausgewählt); und geändert "response.d" zu "Antwort", da ich ASP.NET immer noch nicht Würfel verwende – Bobert123

ich änderte den AJAX-Typ zu GET, und änderte die folgende Zeile: $ ("# search"). Append ($ ("") .val (diese ['id']) .html (diese ['value'])); Das funktioniert jetzt, wenn ich den Wert request.term fest codiere – Bobert123

Ich habe dies funktioniert, indem Sie jquery ui-Bibliothek und die integrierte Autocomplete-Funktion hinzugefügt. Hier ist der endgültige Code:

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

Quelle

2016-07-11 11:13:45 Bobert123

Antwort

Verwandte Themen