Tags<\/b> are used to organize posts or articles on the website. Tags provide an effective way to group related posts and make it easier for the user to find relevant posts quickly. It also helps readers to get a brief idea about the post without reading the entire content. Tags are more like categories, but they can describe posts in more detail than categories. Generally, one category is assigned to a post, on other hand you can use multiple tags for a single post.<\/p>\n
The tags input field<\/b> should be allowed to input multiple values separated by a specific separator. Mostly, the comma (,) is used as a separator for the multiple value’s input field. In this tutorial, we will show you how to create multiple tags input field using jQuery. You can build a user interface to manage tags with autocomplete feature using jQuery and PHP.<\/p>\n
The example code will integrate a text field to input multiple tags. Also, an autocomplete feature will be provided to display tag suggestions from the database under the input field while the user starts typing.<\/p>\n
In this code sample, we will use the TagsInput jQuery plugin to convert a simple text input field to the tag list input area and allow the user to input multiple tag values.<\/p>\n
Define an HTML input field.<\/p>\n
<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"tags_input\"<\/span>><\/span><\/pre>\nInclude the jQuery and TagsInput library files.<\/p>\n
<!-- Include jQuery library --><\/span>\r\n<script<\/span> src<\/span>=\"js\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n\r\n<!-- Include TagsInput jQuery library --><\/span>\r\n<script<\/span> src<\/span>=\"js\/jquery.tagsinput.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span> href<\/span>=\"js\/jquery.tagsinput.css\"<\/span> \/><\/span><\/pre>\nInitialize the tagsInput<\/code> plugin and specify the selector (#tags_input<\/code>) to attach it to the input field.<\/p>\n<script<\/span>><\/span>\r\n$('#tags_input'<\/span>).tagsInput();<\/span>\r\n<\/script<\/span>><\/span><\/pre>\nTags Input with Autocomplete using PHP and MySQL<\/h2>\n
In the following example code snippet, we will show you how to add autocomplete feature to the tags input field using jQuery and PHP.<\/p>\n
Create Database Table:<\/b>
\nTo store the autosuggestion tags data a table is required in the database. The following SQL creates a tags<\/code> table with some basic fields in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `tags`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `name`<\/span> varchar<\/span>(100<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `status`<\/span> tinyint(1<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> 1<\/span> COMMENT<\/span> '1=Active | 0=Inactive'<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nHTML Input Element:<\/b>
\nCreate an input element with HTML.<\/p>\n<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"tags_input\"<\/span>><\/span><\/pre>\njQuery Library:<\/b>
\njQuery library is required to use the TagsInput plugin.<\/p>\n<script<\/span> src<\/span>=\"js\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\njQuery UI Library:<\/b>
\nTo use autocomplete feature in tagsInput, the jQuery UI library is required. Include the jQuery UI library files first.<\/p>\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"js\/jquery-ui\/jquery-ui.min.css\"<\/span>><\/span>\r\n<script<\/span> src<\/span>=\"js\/jquery-ui\/jquery-ui.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\ntagsInput Plugin:<\/b>
\nInclude the library files of the tagsInput jQuery plugin.<\/p>\n<script<\/span> src<\/span>=\"js\/jquery.tagsinput.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span> href<\/span>=\"js\/jquery.tagsinput.css\"<\/span> \/><\/span><\/pre>\nSet server-side script URL in autocomplete_url<\/code> option of the tagsInput() method.<\/p>\n<script<\/span>><\/span>\r\n$('#tags_input'<\/span>).tagsInput({\r\n 'autocomplete_url'<\/span>: 'fetchData.php'<\/span>,\r\n});<\/span>\r\n<\/script<\/span>><\/span><\/pre>\nFetch Autocomplete Tags from Database with PHP and MySQL (fetchData.php):<\/b>
\nThe fetchData.php<\/code> file is called by the tagsInput() method to retrieve the tags from the server-side script based on the search term.<\/p>\n\n- Get the search term using the PHP $_GET method.<\/li>\n
- Fetch the matched records from the database with PHP and MySQL.<\/li>\n
- Return tags data as JSON encoded array using PHP json_encode() function.<\/li>\n<\/ul>\n
<?php
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
<\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbName <\/span>= <\/span>\"codexworld\"<\/span>;
<\/span>\/\/ Create database connection
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Check connection
<\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}
<\/span>\/\/ Get search term
<\/span>$searchTerm <\/span>= <\/span>$_GET<\/span>[<\/span>'term'<\/span>];
<\/span>\/\/ Fetch matched data from the database
<\/span>$query <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM tags WHERE name LIKE '%\"<\/span>.<\/span>$searchTerm<\/span>.<\/span>\"%' AND status = 1 ORDER BY name ASC\"<\/span>);
<\/span>\/\/ Generate array with tags data
<\/span>$tagsData <\/span>= array();
if(<\/span>$query<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$query<\/span>-><\/span>fetch_assoc<\/span>()){
<\/span>$data<\/span>[<\/span>'id'<\/span>] = <\/span>$row<\/span>[<\/span>'id'<\/span>];
<\/span>$data<\/span>[<\/span>'value'<\/span>] = <\/span>$row<\/span>[<\/span>'name'<\/span>];
<\/span>array_push<\/span>(<\/span>$tagsData<\/span>, <\/span>$data<\/span>);
}
}
<\/span>\/\/ Return results as json encoded array
<\/span>echo <\/span>json_encode<\/span>(<\/span>$tagsData<\/span>);
<\/span>?><\/span><\/pre>\n