Question

根据表单缩小自动填充建议。事情是我能够将过滤器发送到服务器;这也提供了正确的输出，但它不会最终成为textarea中的建议（自动完成）。

<!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 code block。

回答曲折的评论。我们不需要li的div包装器。以下代码将证明这一点。除了不使用远程数据源之外，它基本相同。

<!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代码是稍后的问题（上面没有包含哪些代码）。

感谢您的评论。

Answer 1

一些建议。由于您没有提供任何样本数据，因此很难测试或提供示例答案。

＆＃13;

ggplot()

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

Answer 2

问题在于我怀疑JavaScript的次要和神秘编码。当我在php中创建Json数组时，我使用了引号而不是双引号。即。

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

相反，我应该使用

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

当我用双引号反向引用时，它就像一个魅力。顺便说一句：@twisty谢谢你一路上帮助我。

远程数据源的自动完成功能不会提供任何建议

2 个答案: