javascript - Add checkbox to auto complete -jQuery -
i working on code , have used jquery ui autocomplete. need in adding check-boxes can multiple selections , reflect on field comma separation. found plugin want create don't want use plugin [my work] http://www.igniteui.com/combo/selection-and-checkboxes
<script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery-ui.js"></script> <link rel="stylesheet" href="js/jquery-ui.css"> <body> <input id="condition" type="text" placeholder="condition"> </body> <script> var availabletags = [ "actionscript", "applescript", "asp", "basic", "c", "c++", "clojure", "cobol", "coldfusion", "erlang", "fortran", "groovy", "haskell", "java", "javascript", "lisp", "perl", "php", "python", "ruby", "scala", "scheme" ]; $(document).ready(function () { $('#condition').autocomplete({ source: availabletags, minlength: 0 }).focus(function () { try { $(this).autocomplete("search"); } catch (e) { } }); }); </script>
basically first need alter jquery autocomplete's output.
something this
$('yourelement').autocomplete({ /* autocomplete config here */ }).data( "autocomplete" )._renderitem = function( ul, item ) { var checked = ($.inarray(item.label, selecteditems) >= 0 ? 'checked' : ''); return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( '<a><input type="checkbox" ' + checked + '/>' + item.label + '</a>' ) .appendto( ul ); }; then have store picked elements in variable (an array)
$('#yourelement').autocomplete({ // configs select:function(event, ui) {// onselect event // don't forget check if item in array // , if it's case remove selecteditems.push(ui.item.label); } }); take not selectitems array, you'll need define in script
you can see on jsfiddle code gonna output in autocomplete's list
hope bit
Comments
Post a Comment