Установка значения в автозаполнении jquery - PullRequest
Новая
       9

Установка значения в автозаполнении jquery

0 голосов
/ 18 ноября 2018

Я использую автозаполнение jquery для поля ввода городов, но когда я отправляю ввод, он отправляет имя выбранного города, а не идентификатор, как я могу отправить идентификатор, но все равно отображать имя при использовании автозаполнения?

по сути, я хочу, чтобы автозаполнение было таким:

<-option value = "{{$ city-> id}}"> {{city-> name}} <- / option ->

Вот мой текущий код:

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'
        })

1 Ответ

0 голосов
/ 18 ноября 2018

Я думаю, вы хотите сделать что-то вроде следующего: 

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
    );
  }
  return response()->json($usersArray);
}

Просмотрите следующую страницу: http://api.jqueryui.com/autocomplete/#option-source

Массив: array может использоваться для локальных данных. Существует два поддерживаемых формата:

  • Массив строк: [ "Choice1", "Choice2" ]
  • Массив объектов со свойствами метки и значения: [ { label: "Choice1", value: "value1" }, ... ]

Итак, вы хотите вернуть JSON, как: 

Array [
  Object {
    "label": "City",
    "value": id
  }
];

Надеюсь, это поможет.

Обновление

Когда пользователь делает выбор, он использует обратный вызов select. В приведенном выше примере отображается label, и пользователь выбирает его. Это затем устанавливает атрибут value на value выбранного элемента. Это можно увидеть здесь: http://jqueryui.com/autocomplete/#custom-data

С вашим кодом автозаполнения это может выглядеть так:

HTML 

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

JavaScript 

$('#sl').autocomplete({
  source: "/autocomplete",
  focus: function(event, ui) {
    $("#sl-label").val(ui.item.label);
    return false;
  },
  select: function(event, ui) {
    $("#sl-label").val(ui.item.label);
    $("#sl-id").val(ui.item.value);
    return false;
  }
});

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

...