Автозаполнение из удаленного источника данных не дает никаких предложений - PullRequest
Новая
       57

Автозаполнение из удаленного источника данных не дает никаких предложений

0 голосов
/ 07 мая 2018

Автозаполнение предложения сужаются на основе формы. Дело в том, что я могу отправить фильтр (ы) на сервер; что также дает правильный вывод, но не выводится как подсказки (автозаполнение) в текстовой области. 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Combined</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <style>
            .ui-autocomplete-category {
                font-weight: bold;
                padding: .2em .4em;
                margin: .8em 0 .2em;
                line-height: 1.5;
            }

            .ui-autocomplete {
                max-height: 100px;
                overflow-y: auto;
                /* prevent horizontal scrollbar */
                overflow-x: auto;
            }

            .ui-autocomplete-loading {
                background: white url("../img/ui-anim.gif") right center no-repeat;
            }
        </style>
        <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 () {
                $.widget("custom.catcomplete", $.ui.autocomplete, {
                    _create: function () {
                        this._super();
                        this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
                    },
                    _renderMenu: function (ul, items) {
                        var that = this,
                                currentCategory = "";
                        $.each(items, function (index, item) {
                            var li;
                            if (item.event != currentCategory) {
                                ul.append("<li class='ui-autocomplete-category'>" + item.event + "</li>");
                                currentCategory = item.event;
                            }
                            /* li = that._renderItemData(ul, item);
                             if (item.event) {
                             li.attr("aria-label", item.event + " : " + item.label);
                             } */
                            $("<li></li>")
                                    .data("ui-autocomplete-item", item)
                                    .append('<a href="javascript:;"><input type="checkbox"/>' + item.label + '</a>')
                                    .appendTo(ul);
                        });
                    }
                });

                $("#trade").catcomplete({
                    delay: 0,
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            url: "tmp3.php",
                            data: {
                                trade: request.term,
                                trainingID: $('form[name=searchTraining] input[name=trainingID]').val(),
                                totalParticipants: $('form[name=searchTraining] input[name=totalParticipants]').val(),
                                male: $('form[name=searchTraining] input[name=male]').val(),
                                female: $('form[name=searchTraining] input[name=female]').val(),
                                district: $('form[name=searchTraining] input[name=district]').val(),
                                project: $('form[name=searchTraining] input[name=project]').val(),
                                fromDate: $('form[name=searchTraining] input[name=fromDate]').val(),
                                toDate: $('form[name=searchTraining] input[name=toDate]').val(),
                                rPerson: $('form[name=searchTraining] input[name=rPerson]').val()
                            },
                            success: response,
                            dataType: 'json',
                            minLength: 1
                        });
                    }
                });

            });
        </script>
    </head>
    <body>

        <form name="searchTraining">
            <div class="ui-widget">
                <label for="search">Search: </label>
                <textarea class="tradeF" name='trade' id='trade' placeholder="Trade" autocomplete="on" pattern="[a-zA-Z ]+" size="21" ></textarea>
            </div>

            <input pattern="[0-9]+" placeholder="Training ID" name="trainingID" size="1" class="idF" type="text" title="TrainingID">
            <input autocomplete="on" pattern="[0-9]+" placeholder="Total" name="totalParticipants" size="3" type="text" class="totalF">
            <input autocomplete="on" pattern="[0-9]+" placeholder="Male" name="male" size="3" type="text" class="maleF">
            <input autocomplete="on" pattern="[0-9]+" placeholder="Female" name="female" size="3" type="text" class="femaleF">
            <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="District" name="district" size="3" type="text">
            <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Project" name="project" size="3" type="text" value="kfw">
            From<input name="fromDate" size="3" type="text"><br />To<input name="toDate" size="3" type="text">
            <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Venue" name="venue" size="3" type="text">
            <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Resource Person" name="rPerson" size="3" type="text">
            <input type="hidden" name="defaulter" value="true" />
            <input type="hidden" name="questItem" value="" />
        </form>
    </body>
</html>

К вашему сведению: ответ сервера 

[{event:'Commercial',label:'Adda Work'},
{event:'Commercial',label:'Alternative Dispute Resolution'},
{event:'Commercial',label:'Auto Electrician'},
{event:'Commercial',label:'Beautician'},
{event:'Staff',label:'Youth Activits Training'}]

Я не знаю, где я делаю неправильно, но я сузил его до $ ("# trade"). Catcomplete кода блока.

Ответ на извилистый комментарий. Нам не нужна div-оболочка для li. следующий код докажет это. Это в основном то же самое, за исключением того, что он не использует удаленный источник данных. 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Autocomplete - Categories</title>
        <link rel="stylesheet" href="../../res/jquery/jquery-ui/jquery-ui-1.12.1/jquery-ui.css">
        <style>
            .ui-autocomplete-category {
                font-weight: bold;
                padding: .2em .4em;
                margin: .8em 0 .2em;
                line-height: 1.5;
            }

            .ui-autocomplete {
                max-height: 600px;
                overflow-y: auto;
                /* prevent horizontal scrollbar */
                overflow-x: auto;
            }

            .ui-autocomplete-loading {
                background: white url("../img/ui-anim.gif") right center no-repeat;
            }
        </style>
        <script src="../../res/jquery/jquery1.x/jquery-1.12.4.js"></script>
        <script src="../../res/jquery/jquery-ui/jquery-ui-1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $.widget("custom.catcomplete", $.ui.autocomplete, {
                    _create: function () {
                        this._super();
                        this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
                    },
                    _renderMenu: function (ul, items) {
                        var that = this,
                                currentCategory = "";
                        $.each(items, function (index, item) {
                            var li;
                            if (item.event != currentCategory) {
                                ul.append("<li class='ui-autocomplete-category'>" + item.event + "</li>");
                                currentCategory = item.event;
                            }
                            $("<li></li>")
                                    .data("ui-autocomplete-item", item)
                                    .append('<a href="javascript:;"><input type="checkbox"/>' + item.label + '</a>')
                                    .appendTo(ul);
                        });
                    }
                });

                var data = [{event: 'Community', label: 'Agriculture Ex Worker (AEW)'},
                    {event: 'Community', label: 'BMT Trainings for CRPs'},
                    {event: 'Community', label: 'Carpentry'},
                    {event: 'Community', label: 'Fruits & Forest Nursery (Production & Marketting)'},
                    {event: 'Community', label: 'Heavy Machinery Excavator'},
                    {event: 'Community', label: 'Masonry'},
                    {event: 'Community', label: 'Mobile Repairing'},
                    {event: 'Community', label: 'Motor Cycle Repairing'},
                    {event: 'Community', label: 'Operation & Maintenance'},
                    {event: 'Community', label: 'Solar Panel Installation'},
                    {event: 'Community', label: 'Tailoring & Embroidery'},
                    {event: 'Staff', label: 'Engineers Training'},
                    {event: 'Staff', label: 'Engineers Training (Solar Panal)'},
                    {event: 'Staff', label: 'FATA Engineers Meeting'},
                    {event: 'Staff', label: 'FATA Projects Review Meeting'},
                    {event: 'Staff', label: 'Staff Orientation'}];

                $("#trade").catcomplete({
                 delay: 0,
                 source: data
                 });

            });
        </script>
    </head>
    <body>

        <form name="searchTraining">
            <div class="ui-widget">
                <label for="search">Search: </label>
                <textarea class="tradeF" name='trade' id='trade' placeholder="Trade" autocomplete="on" pattern="[a-zA-Z ]+" size="21" ></textarea>
            </div>

            <input pattern="[0-9]+" placeholder="Training ID" name="trainingID" size="1" class="idF" type="text" title="TrainingID">
            <input autocomplete="on" pattern="[0-9]+" placeholder="Total" name="totalParticipants" size="3" type="text" class="totalF">
            <input autocomplete="on" pattern="[0-9]+" placeholder="Male" name="male" size="3" type="text" class="maleF">
            <input autocomplete="on" pattern="[0-9]+" placeholder="Female" name="female" size="3" type="text" class="femaleF">
            <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="District" name="district" size="3" type="text">
            <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Project" name="project" size="3" type="text" value="kfw">
            From<input name="fromDate" size="3" type="text"><br />To<input name="toDate" size="3" type="text">
            <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Venue" name="venue" size="3" type="text">
            <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Resource Person" name="rPerson" size="3" type="text">
            <input type="hidden" name="defaulter" value="true" />
            <input type="hidden" name="questItem" value="" />
        </form>
    </body>
</html>

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

Поскольку вопрос о том, какой код javascript появится, является более поздней проблемой (какой код не указан выше).

Спасибо за комментарии в любом случае.

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

Проблема заключалась в том, что я подозревал незначительное и загадочное кодирование JavaScript. Когда я создал массив Json в php, я использовал кавычку вместо двойной кавычки. т.е. 

"{'event':'Community','label':'Agriculture'}"

вместо этого я должен был использовать 

'{"event":"Community","label":"Agriculture"}'

когда я переворачиваю кавычку с двойной кавычкой, это работает как шарм. Кстати: @twisty спасибо за помощь в этом.

0 голосов
/ 07 мая 2018

Несколько предложений. Поскольку вы не предоставили примерные данные, сложно протестировать или предоставить пример ответа. 

$(function() {
  $.widget("custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
    },
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li;
        if (item.event != currentCategory) {
          ul.append("<li class='ui-autocomplete-category'>" + item.event + "</li>");
          currentCategory = item.event;
        }
        li = $("<li></li>")
          .data("ui-autocomplete-item", item)
          .append('<div><a href="javascript:;"><input type="checkbox"/>' + item.label + '</a></div>')
          .appendTo(ul);
      });
    }
  });

  $("#trade").catcomplete({
    delay: 0,
    source: function(request, response) {
      var myForm = $("form[name='searchTraining']");
      $.ajax({
        type: "POST",
        url: "tmp3.php",
        data: {
          trade: request.term,
          trainingID: $('[name=trainingID]', myForm).val(),
          totalParticipants: $('[name=totalParticipants]', myForm).val(),
          male: $('[name=male]', myForm).val(),
          female: $('[name=female]', myForm).val(),
          district: $('[name=district]', myForm).val(),
          project: $('[name=project]', myForm).val(),
          fromDate: $('[name=fromDate]', myForm).val(),
          toDate: $('[name=toDate]', myForm).val(),
          rPerson: $('[name=rPerson]', myForm).val()
        },
        success: response,
        dataType: 'json',
        minLength: 1
      });
    }
  });
});
.ui-autocomplete-category {
  font-weight: bold;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 1.5;
}

.ui-autocomplete {
  max-height: 100px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: auto;
}

.ui-autocomplete-loading {
  background: white url("../img/ui-anim.gif") right center no-repeat;
}
<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>
<form name="searchTraining">
  <div class="ui-widget">
    <label for="search">Search: </label>
    <textarea class="tradeF" name='trade' id='trade' placeholder="Trade" autocomplete="on" pattern="[a-zA-Z ]+" size="21"></textarea>
  </div>
  <input pattern="[0-9]+" placeholder="Training ID" name="trainingID" size="1" class="idF" type="text" title="TrainingID">
  <input autocomplete="on" pattern="[0-9]+" placeholder="Total" name="totalParticipants" size="3" type="text" class="totalF">
  <input autocomplete="on" pattern="[0-9]+" placeholder="Male" name="male" size="3" type="text" class="maleF">
  <input autocomplete="on" pattern="[0-9]+" placeholder="Female" name="female" size="3" type="text" class="femaleF">
  <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="District" name="district" size="3" type="text">
  <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Project" name="project" size="3" type="text" value="kfw"> From
  <input name="fromDate" size="3" type="text"><br />To<input name="toDate" size="3" type="text">
  <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Venue" name="venue" size="3" type="text">
  <input autocomplete="on" pattern="[a-zA-Z ]+" placeholder="Resource Person" name="rPerson" size="3" type="text">
  <input type="hidden" name="defaulter" value="true" />
  <input type="hidden" name="questItem" value="" />
</form>
...