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

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -