прекращение добавления метки результатов к входу и, если ввод соответствует метке - PullRequest
Новая
       41

прекращение добавления метки результатов к входу и, если ввод соответствует метке

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

Я создал автозаполнение ввода, оно работает хорошо, но я хочу расширить его и сделать его лучше.Но это борьба с моим ограниченным знанием jquery ui, и, несмотря на некоторые проб и ошибок, я не могу решить две проблемы.

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

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

Вот что у меня есть:

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: '/autocomplete',
    select: function(event, ui) {
        event.preventDefault();
        $("#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+', '+ui.item.countryname);

    },
    response: function(event, ui) {
        if (!ui.content.length) {
        var noResult = { value:"",label:'No results found', countryname:""  };
        ui.content.push(noResult);

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

1 Ответ

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

Пример того, как отключить элемент выбора, можно найти здесь: http://jqueryui.com/autocomplete/#categories

Этот пример немного сложен, так как мы получаем доступ к виджету меню внутри виджета автозаполнения.Для вашего кода можно использовать аналогичный метод: 

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

widget ()

Возвращает объект jQuery, содержащий элемент меню.Хотя пункты меню постоянно создаются и уничтожаются, сам элемент меню создается во время инициализации и постоянно используется.

Это адрес пункта № 1.

Для адреса пункта № 2,Вы должны рассмотреть логику принятия выбора, если пользователь не сделал выбор.Например, если пользователь набрал l и получил 10 результатов или даже только 2 результата ... что вы выбираете для пользователя?Также, если пользователь отошел от поля, автоселект закроет его меню и уничтожит результаты.

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

$(function() {

  var countries = [{
    country: 1,
    countryname: "UK",
    label: "London",
    value: 1
  }, {
    country: 1,
    countryname: "UK",
    label: "Manchester",
    value: 2
  }];

  $('#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);
  }

  $("form").submit(function(e) {
    e.preventDefault();
    console.log($(this).serialize());
    if ($("#country").val() == "" || $("#city").val() == "") {
      $("#sl").focus();
      return false;
    }
    return true;
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>

<div class="search-homepage-input">
  <form>
    <div class="col-md-9">
      <input type="text" name="sl" class="form-control shop-input" max-length="50" placeholder="Eg. England, London, Manchester" id="sl" /> <span style="color: red; font-size: 65%;">* Required</span>
      <input type="text" name="country" id="country" style="display: none;" />
      <input type="text" name="city" id="city" style="display: none;" />
    </div>
    <div class="col-md-3">
      <button type="submit" class="btn btn-homepage">Find Teams</button>
    </div>
  </form>
</div>

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

...