Выбор подходящей метки для ввода при отправке - автозаполнение

Question

Я создаю автозаполнение на одном из моих входных данных поиска, и почти все из него работает нормально, за исключением одной заключительной части, которая заставляет систему распознавать, соответствует ли ввод метке, если метка не была нажата.

Например, если в поле ввода введено «Лондон», но пользователь не нажимает на метку «Лондон», то значения метки не отправляются, и результаты не достигаются.для Лондона значения отправляются как ноль.

Итак, чего я хочу добиться, так это того, что если в поле ввода введен лондон, но метка не нажата, то при нажатии кнопки «Отправить» отправляется соответствующий лондон.Это должно быть только для прямого матча, поэтому, если «Лондон» совпадает с «Лондон».Как мне это сделать?

вот мой код:

html:

<div class="search-homepage-input">
    {!! Form::open(['route' => 'search.index', 'method' => 'GET']) !!}
    <div class="col-md-9 col-l">
    {!! Form::text('sl', null, array('class' => 'form-control shop-input', 'maxlength' =>'50', 'placeholder' => 'Search by city. Eg. London, New York, Paris...', 'id' => 'sl')) !!}
    </div>
    {!! Form::hidden('country', null, array('id' => 'country')) !!}
    {!! Form::hidden('city', null, array('id' => 'city')) !!}
    <div class="col-md-3 col-r">
        {!! Form::submit('Find Shops', array('class' => 'btn btn-homepage-search'))  !!}
    </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[] = array(
                "label" => $cities->name,
                "value" => $cities->id,
                "country" => $cities->countries->id,
                "countryname" => $cities->countries->country

            );
        }
        return response()->json($usersArray);
    }

JS:

 $('#sl').autocomplete({
    source: countries,
    select: function(event, ui) {
      event.preventDefault();
      if (ui.item.label === "No results found") {
        $("#sl").val("");
        return false;
      }
      $("#country").val(ui.item.country); // save selected id to hidden input
      $("#city").val(ui.item.value); // save selected id to hidden input
      $('#sl').val(ui.item.label + ', ' + ui.item.countryname)
    },
    focus: function(event, ui) {
      event.preventDefault();
      $('#sl').val(ui.item.label);
    },
    response: function(event, ui) {
      if (!ui.content.length) {
        var noResult = {
          value: "",
          label: 'No results found'
        };
        ui.content.push(noResult);
      }
    }
  });

  $("#sl").autocomplete("widget").menu("option", "items", "> li:not('.no-select')");

  $("#sl").autocomplete("instance")._renderItem = function(ul, item) {
    var li = $("<li>");
    if (item.country == undefined) {
      li.addClass("no-select").append(item.label);
    } else {
      li.append("<div><strong>" + item.label + "</strong>, " + item.countryname + "</div>");
    }
    return li.appendTo(ul);
  }