Setting the value in jquery autocomplete

I am using jquery autocomplete for a input box of cities but when i send the input it sends the name of the selected city rather than the id, how do i send the id but still show the name when using autocomplete?

so in essence i want autocomplete to be like:

< -option value=""><-/option->

Here is my current code:

HTML:

        <div class="search-homepage-input">
            {!! Form::open(['route' => 'search.index', 'method' => 'GET']) !!}
            <div class="col-md-9">
            {!! Form::text('city', null, array('class' => 'form-control', 'maxlength' =>'55', 'placeholder' => 'Eg. England, London, Manchester', 'id' => 'sl')) !!}
            </div>
            <div class="col-md-3">
                {!! Form::submit('Find Teams', array('class' => 'btn btn-homepage'))  !!}
            </div>
            {!! Form::close() !!}
        </div>

PHP(Laravel):

 public function autoComplete(Request $request){

    $query = $request->term;
    $res = City::where('name', 'LIKE', "%$query%")->orderBy('name')->paginate(5);
    foreach($res as $cities ){
        $usersArray[] = $cities->name;
    }
    return response()->json($usersArray);
}

JS:

 $('#sl').autocomplete({
            source: '/autocomplete'
        })

via Chebli Mohamed