Select2<\/b> is a jQuery select box replacement plugin that allows customized select boxes with support for searching, tagging, and remote data loading features. You can convert HTML select boxes to highly featured dropdown select boxes using the Select2 JavaScript library. In this tutorial, we will show you how to integrate the Select2 dropdown with remote data<\/b> loading using PHP.<\/p>\n
The remote data loading feature is very useful when a large number of options need to be listed in a select box dropdown. Instead of listing all the options at once, it would be a great idea to load data remotely from the server side based on the user’s choice.<\/p>\n
In this example script, we will create a select box with search and multi-select options with Ajax using PHP.<\/p>\n
Select2 is designed to replace the standard <select<\/span>><\/span> boxes in the advanced dropdown. In the following code snippet, we will show you a basic example of Select2 usage.<\/p>\n Include the jQuery and Select2 library files.<\/p>\n Call the The following example shows how to fetch the select box options from the database remotely and listed in Select2 dropdown.<\/p>\n Create Database Table:<\/u><\/b> jQuery and Select2 Library:<\/u><\/b> HTML Select box Element:<\/u><\/b> Select2 Remote Data with Ajax:<\/u><\/b> Fetch Remote Data from Database with PHP and MySQL (remote_data.php):<\/u><\/b>\n
<select<\/span> class<\/span>=\"country-select\"<\/span> name<\/span>=\"country\"<\/span>><\/span>\r\n <option<\/span> value<\/span>=\"AU\"<\/span>><\/span>Australia<\/option<\/span>><\/span>\r\n ...\r\n <option<\/span> value<\/span>=\"US\"<\/span>><\/span>United States<\/option<\/span>><\/span>\r\n<\/select<\/span>><\/span><\/pre>\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 Select2 jQuery library --><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"select2\/css\/select2.min.css\"<\/span>><\/span>\r\n<script<\/span> src<\/span>=\"select2\/js\/select2.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\nselect2()<\/code> method on an HTML selector to initialize the Select2 plugin.<\/p>\n<script<\/span>><\/span>\r\n$(document<\/span>).ready(function<\/span>(<\/span>) <\/span>{\r\n $('.country-select'<\/span>).select2();\r\n});<\/span> \r\n<\/script<\/span>><\/span><\/pre>\nLoad Remote Data in Select2 Dropdown with Ajax using PHP<\/h2>\n
\nA table is required to store select box options data in the database. The following SQL creates a users<\/code> table with some basic fields in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `users`<\/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 `created`<\/span> datetime DEFAULT<\/span> NULL<\/span>,\r\n `status`<\/span> tinyint(1<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> 1<\/span> COMMENT<\/span> '1=Active | 0=Block'<\/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>\n
\nInclude the jQuery and Select2 library files.<\/p>\n<!-- jQuery library --><\/span>\r\n<script<\/span> src<\/span>=\"js\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n\r\n<!-- Select2 library files --><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"select2\/css\/select2.min.css\"<\/span>><\/span>\r\n<script<\/span> src<\/span>=\"select2\/js\/select2.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\n
\nDefine a <select<\/span>><\/span> element with HTML.<\/p>\n\n
<select<\/span> name<\/span>=\"user_id\"<\/span> id<\/span>=\"user_select\"<\/span>><\/span>\r\n <option<\/span> value<\/span>=\"\"<\/span>><\/span>-- Select user --<\/option<\/span>><\/span>\r\n<\/select<\/span>><\/span><\/pre>\n
\nUse the select2()<\/code> method and specify the selector (#user_select<\/code>) to attach Select2 dropdown to the select box.<\/p>\n\n
remote_data.php<\/code>).<\/li>\nplaceholder<\/code> option to specify the placeholder text in the select box dropdown.<\/li>\nminimumInputLength<\/code> option allows you to set the limit the search will start loading the remote data.<\/li>\n<\/ul>\n<script<\/span>><\/span>\r\n$(document<\/span>).ready(function<\/span>(<\/span>) <\/span>{\r\n $(\"#user_select\"<\/span>).select2({\r\n ajax: {\r\n url: \"remote_data.php\"<\/span>,\r\n dataType: 'json'<\/span>,\r\n data: function<\/span> (params<\/span>) <\/span>{\r\n var<\/span> query = {\r\n search: params.term,\r\n type: 'user_search'<\/span>\r\n }\r\n\r\n \/\/ Query parameters will be ?search=[term]&type=user_search<\/span>\r\n return<\/span> query;\r\n },\r\n processResults: function<\/span> (data<\/span>) <\/span>{\r\n return<\/span> {\r\n results: data\r\n };\r\n }\r\n },\r\n cache: true<\/span>,\r\n placeholder: 'Search for a user...'<\/span>,\r\n minimumInputLength: 1<\/span>\r\n });\r\n});<\/span>\r\n<\/span><\/script<\/span>><\/span><\/pre>\n
\nThe remote_data.php<\/code> file is loaded by the select2 ajax method to fetch data from the database and list them as options in the select box dropdown.<\/p>\n\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_db\"<\/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>);
}
if(!empty(<\/span>$_GET<\/span>[<\/span>'type'<\/span>]) && <\/span>$_GET<\/span>[<\/span>'type'<\/span>] == <\/span>'user_search'<\/span>){
<\/span>$search_term <\/span>= !empty(<\/span>$_GET<\/span>[<\/span>'search'<\/span>