JQuery автоматически завершает возвращение массива данных с меткой и значением, но не показывает метки как предложения - PullRequest
Новая
       0

JQuery автоматически завершает возвращение массива данных с меткой и значением, но не показывает метки как предложения

0 голосов
/ 30 января 2019

Я делаю вызов AJAX с Jquery-autocomplete на веб-сайте WordPress (список аэропортов в качестве метки и идентификатор аэропорта в качестве значения).

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

Источник данных: 

function ajax_listings() {
global $wpdb; 

//get names of all airports
$name = '%'.$wpdb->esc_like(stripslashes($_POST['name'])).'%';
$sql = "select airportid, completename
    from _airports
    where completename like %s";

$sql = $wpdb->prepare($sql, $name);

$results = $wpdb->get_results($sql);

$titles = array();
foreach( $results as $r ) {
    $titles[] = array(
        "label" => $r->completename,
        "value" => $r->airportid
    );
}

echo json_encode($titles); 

die(); 
}

Мой вызов AJAX: 

$('#start').autoComplete({
    source: function(name, response) {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: 'wp-admin/admin-ajax.php',
            data: 'action=get_listing_names&name='+name,
            dataType: 'json',
            success: function( data ) {
              response( $.map( data.d, function( item ) {
                return {
                  label: item.label,
                  value: item.value
                }
              }));
            }
            });
    },
    select: function (event, ui) {
             $('#start').val(ui.item.label); // display the selected text
             $('#idstart').val(ui.item.value); // save selected id to hidden input
             return false;
    },
    focus: function (event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    }
});

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

Пример возвращаемого массивакогда я набираю «MON»: 

[101] {label: "PLP, Captain Ramon Xatruch Airport, La Palma, Panama", value: "5841"} 
[102] {label: "LTI, Altai Airport, Altai, Mongolia", value: "6370"}
...

Ответы [ 2 ]

0 голосов
/ 28 июня 2019 
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
 <div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
  </div>

</body>
<script>
    $( function() {
      var availableTags = [
        { label: "ActionScript", value: "123" },
        { label: "AppleScript", value: "456" },
        { label: "Scheme", value: "Scheme" }
      ];
      $( "#tags" ).autocomplete({
        source: availableTags,
        focus: function(event, ui ) {
          // console.log(ui.item.label);
          this.value = ui.item.label; // this doesn't work
        }

      });
    } );
  </script>
</html>

используйте и наслаждайтесь комментируйте, если это полезно, скопируйте код вставки и используйте его как требуется

0 голосов
/ 31 января 2019

Я подозреваю, что проблема здесь: 

data: 'action=get_listing_names&name=' + name,

Переменная name, но пользовательский интерфейс передает объект с этим: { term: '' }.Измените его на: 

data: 'action=get_listing_names&name=' + name.term,

Это обеспечит получение текста с ввода.

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

  • Объект запроса с одним свойством term, которое ссылается на значение, находящееся в данный момент в текстовом вводе.Например, если пользователь вводит "new yo" в поле города, автозаполнение term будет равно "new yo".

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

Более полный пример: 

$(function() {
  $('#start').autocomplete({
    source: function(req, response) {
      $.ajax({
        type: 'POST',
        dataType: 'json',
        url: 'wp-admin/admin-ajax.php',
        data: 'action=get_listing_names&name=' + req.term,
        dataType: 'json',
        success: function(data) {
          response(data);
        }
      });
    },
    select: function(event, ui) {
      $('#start').val(ui.item.label); // display the selected text
      $('#idstart').val(ui.item.value); // save selected id to hidden input
      return false;
    },
    focus: function(event, ui) {
      event.preventDefault();
      $(this).val(ui.item.label);
    }
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
  <label>Start</label> <input type="text" id="start">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...