I would like to edit the jquery tag-it suggestion list items

Question

I am using jquery tag-it & jquery UI plug-ins in my application here I whould like to edit the tag-it suggestion list items in order to show profile pic name & email id same as outlook please guid me.

Naimish Makwana · Answer

To customize the suggestion list items in jquery tag-it you will need to modify the rendering of the suggestion list items. Here are the general steps to achieve this: Customize the data source: You will need to customize the data source of the tag-it plugin to include the profile picture name and email ID. You can do this by providing a custom data source function that returns an array of objects each object representing a suggestion item with profile picture name and email ID properties. Customize the rendering: Once you have modified the data source you can customize the rendering of the suggestion list items. You can use the renderItem option of the tag-it plugin to provide a custom rendering function. This function should take the suggestion item object as an argument and return an HTML string that represents the suggestion list item with the profile picture name and email ID. Here's an example code snippet that demonstrates how to achieve this: $('#myTags').tagit({ // Custom data source function that returns an array of objects with profile picture name and email ID properties autocomplete: { source: function(request response) { // Your custom code to retrieve suggestion data with profile picture name and email ID properties // and return an array of objects // Example: var suggestions = [ { label: 'John Doe' value: 'john.doe@example.com' photo: 'john.jpg' } { label: 'Jane Smith' value: 'jane.smith@example.com' photo: 'jane.jpg' } ]; response(suggestions); } } // Custom rendering function that renders the suggestion list item with profile picture name and email ID // Assumes that each suggestion item object has a label value and photo property // The photo property contains the URL of the profile picture // You can customize this function as per your requirements renderItem: function(item) { var photo = ' '; var label = ' ' + item.label + ' '; var value = ' ' + item.value + ' '; return ' ' + photo + label + value + ' '; } }); Thanks