PHP — Input multiple tags with dynamic autocomplete example

Create Bootstrap Tags Input with jQuery, PHP & MySQL

Bootstrap tags input is an input box that automatically convert typed text into tags or tokens when a certain key pressed like Enter Key or Comma. The tags input feature is very user friendly as it highlighted information right on the box and replaces conventional comma separated text in input box. You can implement Bootstrap tags input in your projects for the input box when you needed multiple details from a source like persons skills etc.

So in this tutorial you will learn how to implement Bootstrap tags input with PHP and MySQL. The tutorial explained in easy steps with live demo and link to download source code.

As we have covered this tutorial with live demo to save a developer details with name and skills. So the file structure for the example is following.

Steps1: Create Database Tables
As in this example, we will save details into MySQL database table. So first we will create MySQL database table developers to insert records.

CREATE TABLE `developers` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `skills` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Steps2: Inlucde Bootstrap and Tags Input Plugin Files
As in this tutorial we have used Bootstrap Tags input Plugin, so we will include Bootstrap, jQuery and Tags input plugin files in index.php

Steps3: Create Form with Tags Input
We will create a Form with Bootstrap tags input by using data-role=”tagsinput” to create tags input.

 
Create Bootstrap Tags Input with jQuery, PHP & MySQL
 
 
Name: 
 
 
 
Your Skills: 
 
 
 
 
 
 
 
 
 

Steps4: Customize Bootstrap Tags Input
To create tags input, we need to use data-role=”tagsinput” with input, the plugin converts input to work as tags input. The default keys which are (ENTER and comma) to create tags. But you can also customize plugin functionality using tags input plugin function below code. You can also set limit of maximum tags using maxTags

Steps5: Save Tags input values
Now finally in save.php, we will save tags input values into MySQL database table with PHP.

• Build Live Chat System with Ajax, PHP & MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Invoice System with PHP & MySQL
• Push Notification System with PHP & MySQL
• Create Bootstrap Cards with PHP and MySQL
• Build Content Management System with PHP & MySQL
• Convert Unix Timestamp To Readable Date Time in PHP
• Ajax Drop Down Selection Data Load with PHP & MySQL
• Inventory Management System with Ajax, PHP & MySQL
• Drag and Drop File Upload using jQuery and PHP
• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download

7 thoughts on “ Create Bootstrap Tags Input with jQuery, PHP & MySQL ”

Thanks for the really good tutorial, for anyone who want to use only tutorial CSS bootstrap-tagsinput.css might have the tagged input background color problem here the fix: .bootstrap-tagsinput .tag <
margin-right: 2px;
color: black;
background-color: #e5baef;
>

Источник

Php – Extract name and value of all input tags with DomDocument

The DomDocument class in php can be used to parse html/xml content and build objects that can be queried using standard functions to extract values.

The following functions are quite useful:

• getElementsByTagName — Get all elements under a node that match a tagname
• getNamedItem — Get element with a particular «name source-code» >/* Generic function to fetch all input tags (name and value) on a page Useful when writing automatic login bots/scrapers */ function get_input_tags($html) < $post_data = array(); // a new dom object $dom = new DomDocument; //load the html into the object $dom->loadHTML($html); //discard white space $dom->preserveWhiteSpace = false; //all input tags as a list $input_tags = $dom->getElementsByTagName(‘input’); //get all rows from the table for ($i = 0; $i < $input_tags->length; $i++) < if( is_object($input_tags->item($i)) ) < $name = $value = ''; $name_o = $input_tags->item($i)->attributes->getNamedItem(‘name’); if(is_object($name_o)) < $name = $name_o->value; $value_o = $input_tags->item($i)->attributes->getNamedItem(‘value’); if(is_object($value_o)) < $value = $input_tags->item($i)->attributes->getNamedItem(‘value’)->value; > $post_data[$name] = $value; > > > return $post_data; > /* Usage */ error_reporting(~E_WARNING); $html = file_get_contents(«https://accounts.google.com/ServiceLoginAuth»); echo «

  "; print_r(get_input_tags($html)); echo "

  «;

Test the above code example on your end and see the output. For any questions let us know in the comments below.

About Silver Moon A Tech Enthusiast, Blogger, Linux Fan and a Software Developer. Writes about Computer hardware, Linux and Open Source software and coding in Python, Php and Javascript. He can be reached at [email protected] .

5 Comments

Источник

Tags Input with Autocomplete using jQuery and PHP Example

In this post i am going to give you the example of Add Multiple input tags with autocomplete from MySQL database table using typeahead bootstrap JS and tagmanager JS.

Sometimes we require to make multiple input tags on our form. At that time we require to use jquery plugin for input multiple tags. But here we are going to use tagmanager.js plugin for add multiple input tags. I already added one simple tutorial for tagmanager.js here : Bootstrap — Input multiple tags example using Tag Manager Jquery Plugin, But In this article we learn how to insert tags with autocomplete that get data from database table. Autocomplete require when we have lots of data comes from database table, it can handle only by autocomplete.

Tag Manager plugin through we can make input tags function and it’s provide by maxfavilli.com. Input tags will help to add multiple tags with good layout and better way. If you need to add multiple value into on single text box then you can use tag manager with typeahead js.

In this example i use following files for css and js that way we can make simple example:

1) bootstrap.min.css

2) bootstrap.min.js

3) jquery.min.js

4) tagmanager.min.css

5) tagmanager.min.js

6) bootstrap3-typeahead.min.js

Ok, so let’s follow to create just two php files and make example like as bellow preview:

Before create two fies as example we have one «tags» table input your database like as bellow screen shot:

Create index.php File

Submit