How to get jQuery autocomplete value through select dropdown id - ajax

Question

I am going to develop three autocomplete dropdown boxes using jQuery ajax for country state and city on my laravel project. I can implement simple html dropdowns using ajax. But while using jQuery autocomplete it automatically adds an input field in which it puts the value over selecting options from dropdown.
The issue is I am getting only values as text string from input field where I need the id of country which is my database. Previously I was able to get this id using html select element by using the value attribute but it seems there no way to get this id from input field.
How to get this and moreover how to use auto complete for multiple select boxes which needs to be auto changed by selecting options from any select boxes?
html select elements
<div class="ui-widget">
<p style="float:right;display:block;font-size:15px;">
<select id="country" name="sel_countries" required=""><option value="">Select Country</option>
#foreach ($countries as $country)
<option value="{{ $country->id }}">
{{ $country->name }}
</option>
#endforeach
</select>
<select id="state" name="sel_states" required=""><option value="">Select State</option></select>
<select id="city" name="sel_cities" required=""><option value="">Select City</option></select>
</p></div>
html ajax request
$('#country').change(function(){
var cid = $(this).val();
if(cid){
$.ajax({
type:"get",
url:"<?php echo $url; ?>/getStates/"+cid,
success:function(res)
{
if(res)
{
$("#state").empty();
$("#city").empty();
$("#state").append('<option>Select State</option>');
$.each(res,function(key,value){
$("#state").append('<option value="'+key+'">'+value+'</option>');
});
}
}
});
}
});
$('#state').change(function(){
var sid = $(this).val();
if(sid){
$.ajax({
type:"get",
url:"<?php echo $url; ?>/getCities/"+sid,
success:function(res)
{
if(res)
{
$("#city").empty();
$("#city").append('<option>Select City</option>');
$.each(res,function(key,value){
$("#city").append('<option value="'+key+'">'+value+'</option>');
});
}
}
});
}
});
bootstrap autocomplete code
$( function() {
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
.addClass( "custom-combobox" )
.insertAfter( this.element );
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children( ":selected" ),
value = selected.val() ? selected.text() : "";
this.input = $( "<input>" )
.appendTo( this.wrapper )
.val( value )
.attr( "title", "" )
.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy( this, "_source" )
})
.tooltip({
classes: {
"ui-tooltip": "ui-state-highlight"
}
});
this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( "select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.attr( "height", "" )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: "false"
})
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.on( "mousedown", function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.on( "click", function() {
input.trigger( "focus" );
// Close if already visible
if ( wasOpen ) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
},
_source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( this.element.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text,
value: text,
option: this
};
}) );
},
_removeIfInvalid: function( event, ui ) {
// Selected an item, nothing to do
if ( ui.item ) {
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children( "option" ).each(function() {
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if ( valid ) {
return;
}
// Remove invalid value
this.input
.val( "" )
.attr( "title", value + " didn't match any item" )
.tooltip( "open" );
this.element.val( "" );
this._delay(function() {
this.input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
this.input.autocomplete( "instance" ).term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
$( "#country" ).combobox();
$( "#toggle" ).on( "click", function() {
$( "#country" ).toggle();
});
} );
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding-top: 2px;
padding-bottom: 5px;
padding-right: 5px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
<p style="float:right;display:block;font-size:15px;">
<select id="country" name="sel_countries" required=""><option value="">Select Country</option>
<option value="1">
INDIA
</option>
<option value="1">
USA
</option>
<option value="1">
UK
</option>
<option value="1">
AUSTRALIA
</option>
<option value="1">
BRAZIL
</option>
</select>
<select id="state" name="sel_states" required=""><option value="">Select State</option></select>
<select id="city" name="sel_cities" required=""><option value="">Select City</option></select>
</p></div></div>