Select 2 basic remote data set integration

Select 2 is a jQuery plugin for select boxes. Using Select 2 we can search in a select box’s option values and connect with remote data set in json format.

Here we look how to inegrate select 2 with a remote data set( or simply from a json response url from our own web application).

The format of json response need to be like this (View

"results": [{
"text": "New York",
"id": "1"
}, {
"text": "California",
"id": "2"
}, {
"text": "Los Angels",
"id": "3"
"more": false

The key value of ‘text’ will be shown in option text and key value of ‘id’ will be shown in option id.

View the fiddle to look how this works.

Including Select 2

<link rel="stylesheet" type="text/css" href="">

<script type="text/javascript" src=""></script>




width:200px !important;


    placeholder: "Search",
    minimumInputLength: 1,
    ajax: {
        url: "",
        dataType: 'json',
        data: function(term, page) {
            return {
                q: term,
                page_limit: 10,


$usa_states = array( 
               array('text'=>'New Jersey','id'=>2), 
               array('text'=>'New York','id'=>3), 
               array('text'=>'Los Angels','id'=>6), 
$array['results'] = $usa_states;
$array['more'] = false;
header("Content-type:application/json; charset=utf-8");
echo json_encode($array);

Multiple handle range slider using limitslider

jQueryUi’s Slider can be used for creating a  range slider with multiple handle.
But one of the problem of jQueryUi slider I faced is the crossing of slider handle. I tried using many slider plugins till I found the solution using Limitslider, an extension of jQuery UI slider itself created by Martijn van der Lee –

The below features of limitslider really helped me

  • Allows or blocks crossing of sliders.
  • Minimum distance between sliders.
  • Label on the sliders.
  • Use all of jQueryUI’s slider functionality.


Limit slider jquery ui example

Including required stylesheet and scripts
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.limitslider.js"></script>
Html element on which limitslider is initialized
 <div class="example-basic"></div>
Initializing Limitslider

values: [ 1,5,15,20 ] ,
max: 30,
gap: 1,
label:function(position, handle){
return '<span>'+ (position) +'</span>Handle ' + (handle+1);
stop:function(event, ui){
slide:function(event, ui){
// for making first handle not movable
alert('Cannot move this handle');
return false;
Styling handle bar and label

margin: 30px 0px;
.ui-slider-horizontal > span > div
position: absolute;
top: 30px;
color: #000 !important;
width: 50px;
left: -14px;
background: #f7f7f7;
border: 1px solid #ccc;
border-radius: 5px;
padding: 3px;
.ui-slider-horizontal > span > div::before
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #cccccc;
position: absolute;
top: -6px;
left: 18px;
.ui-slider-horizontal > span > div > span
position: absolute;
top: -58px;
color: #000 !important;
left: 15px;
background: #f7f7f7;
padding: 3px;
.ui-slider-horizontal > span {
outline: none !important;


Contact Form using PHP


<form action="" method="post">
<input name="name" type="text" />
<input name="email" type="text" />
<input name="phone" type="text" />
<textarea name="message"></textarea>
<input name="submit" type="submit" value="Send" />

Some key things to remember here,

  • action – Action attribute inside the <form> element tell the browser to which page the form is submitted. When left empty the form will be submitted to the current page itself.
  • method – Method can be either POST or GET. It is better to use POST. know more
  • name=’submit’ – This is used in our PHP code to check whether the form is submitted or not.


use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'PHPMailer.php';
require 'Exception.php';
$mail = new PHPMailer(true);
try {
$mail->setFrom('', 'Appunitz');
$mail->addReplyTo('', 'Appunitz');
$mail->addBCC(''); // Your email address for receiving a copy of the message
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = 'Enquiry Message';
$body = "<label>Name</label><p>".$_POST['name']."</p>".
$mail->Body = $body;
$mail->AltBody = $body;
echo 'Message has been sent';
} catch (Exception $e) {
echo 'Message could not be sent.';
echo 'Mailer Error: ' . $mail->ErrorInfo;

We are using PHPMailer for sending mail.

$_POST['name'] // variable has the name field's value submitted by the user.

All the working code is available for download.