jQuery автозаполнение ("поиск") не отображает список при вызове из обработчика Select - PullRequest
Новая
       57

jQuery автозаполнение ("поиск") не отображает список при вызове из обработчика Select

0 голосов
/ 17 июня 2020

Я использую автозаполнение jQ в ситуации, когда список результатов может быть большим, поэтому я пытаюсь реализовать двухэтапную систему, которая должна работать следующим образом:

  1. как пользователь вводит: если первый вызов источника данных (ajax) дает слишком много результатов, я группирую наборы результатов, которые в начале имеют общий текст, в отдельные элементы результатов «группы».

  2. Я захватываю событие «select» в результирующем списке автозаполнения, и в моем обработчике я перемещаю выбранное значение на вход, а затем проверяю, выбрал ли пользователь один из этих элементов группы.

  3. Если это так, я вызываю автозаполнение («поиск»), используя общий текст в качестве данных запроса. Это возвращает отдельные элементы, которые были сгруппированы при первом вызове, и они должны отображаться во втором списке автозаполнения.

Все работает как запланировано - второй вызов AJAX , отдельные элементы из группы возвращаются (см. console.log ()) и передаются в обратный вызов ответа, но второй список не отображается.

Я прототипирую все это на тестовой странице, адаптированной из одного из jQuery примеров. У меня есть кнопка, которая запускает второй поиск и работает нормально - это вызов из обработчика Select, который не может создать список. Я использую Win10 и Chrome. 

<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script>
    $( function() {
        $("#myinput").autocomplete({
            select: function( event, ui )           { nextcall( event, ui)},
            source: function( request, response )   { myajax  ( request, response) }
        });
        $("#btn").click(function () { $("#myinput").autocomplete( "search", "GROUPITEM" ) } );
    });

    function nextcall (event, ui) {
        var itemval = ui["item"]["value"];
        $("#myinput").val(itemval);
        if (itemval === "GROUPITEM") {
            $("#myinput").autocomplete( "close" );
            $("#myinput").autocomplete( "search" );
        }
    }

    function myajax( request, response ) {
        jQuery.ajax({
            url : "ajax.php",
            type : "GET",
            data : { searchterm : request.term },
            success : function (result) {
                console.log(result);
                var resultarray = result.split("||")
                response(resultarray);
            }
        }); 
    }
</script>
</head>
<body>
    <div class="ui-widget">
      <p><input id="myinput"><input type="button" id="btn" value="test the call">
    </div>
</body>
</html>

ajax. php: 

<?php
$searchterm = $_GET["searchterm"];
if ($searchterm == "GROUPITEM" ) {
    echo "GROUP ITEM 1||GROUP ITEM 2";
} else {
    echo "ITEM1||ITEM2||GROUPITEM";
}

Любая помощь приветствуется.

...