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

Popular posts from this blog

java - BeanIO write annotated class to fixedlength -

Using Java 8 lambdas/transformations to combine and flatten two Maps -

How to connect android app to App engine -