<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.mobile-container{max-width:360px;width:100%;margin:0 auto}
.header{width:100%;float:left;padding:5px 0;background:rgba(187, 20, 208, 0.83)}
.modal-dialog{margin:0px;padding:0px;}
.modal-dialog .modal-content{margin:0px;padding:0px;border: none;border-radius: 0;}
.ui-menu.ui-widget{z-index:99999;}
.container{width:100%;}
</style>
</head>
<body>
<div class="mobile-container">
<div class="header">
<div class="container">
<input value="" id="from" name="Departure" placeholder="From" type="text" class="form-control" data-toggle="modal" data-target="#myModal" >
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">type the character</h4>
</div>
<div class="modal-body">
<!-- <input value="" id="autofilldata" name="autofilldata" placeholder="LAX- Los Angeles International Airport, Los Angeles, California, United States" type="text" class="form-control" > -->
<input id="project" placeholder="LAX- Los Angeles International Airport, Los Angeles, California, United States" class="form-control" >
<input type="hidden" id="project-id">
<!-- <p id="project-description"></p> -->
</div>
<div class="modal-footer">
<button type="button" id="put-the-value" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$( function() {
var projects = [
{
value: "LAX- Los Angeles International Airport, Los Angeles",
label: "California",
desc: "United States",
},
{
value: "DXB- Dubai International Airport",
label: "Dubai",
desc: "United Arab Emirates",
},
{
value: "RSW- Southwest Florida International Airport",
label: "Fort Myers, Florida",
desc: "United States",
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.desc );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label + "," + ui.item.value + "," + ui.item.desc );
$( "#project-id" ).val( ui.item.value + "," + ui.item.desc );
$( "#project-description" ).html( ui.item.desc );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<i class='fa fa-plane' aria-hidden='true'></i> " + item.label + " " + item.desc + " "+ item.value )
.appendTo( ul );
};
} );
$('document').ready(function(){
$('#put-the-value').on('click', function()
{
console.log('came');
var x = $('#project').val();
console.log(x);
$('#from').val(x);
});
});
</script>
</body>
</html>
