Question

嘿伙计们提前感谢您的帮助！我正在尝试使用grails findByAll（）将列表拉入此处的jQuery自动完成中：https://jqueryui.com/autocomplete/

我觉得我越来越近了，但是在jQuery中使用grails会让我失望。

<script>
  $(function() {
    var availableTags = "${fullSkillList?.name}";
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
</script>

如果我做一个简单的$ {fullSkillList？.name}，那么在html中打印的列表看起来像[abc，cde，...，xyz]，但自动完成功能不起作用。有什么建议？谢谢你们

Answer 1

您可以将数据呈现为json，get＆amp;用javascript映射它。下面的代码以这种方式工作并完成工作。但是，将自动完成与FindAll *方法的返回联系起来并不是一种好方法。想象一下，如果你有100000个结果。无论如何，你需要的业余片段如下;

    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/stop/getStops",
            dataType: "json",
            success: function (response) {
                //Create a map.
                var data =
                        $.map(response, function (item) {
                            console.log("id: " + item.id);
                            console.log("name: " + item.name);
                            return {
                                id: item.id,
                                value: item.name
                            }
                        });


                $("#from_tf").autocomplete({
                    source: data,
                    select: function (event, ui) {
                        console.log("from selected id:" + ui.item.id);
                        console.log("from selected name:" + ui.item.value);

                        $('#from_id').val(ui.item.id);
                    },
                    minLength: 3

                });

                $("#to_tf").autocomplete({
                    source: data,
                    select: function (event, ui) {
                        console.log("to selected id:" + ui.item.id);
                        console.log("to selected name:" + ui.item.value);

                        $('#to_id').val(ui.item.id);
                    },
                    minLength: 3
                });

            }
        });

    });

Answer 2

你必须循环$ {fullSkillList}

<script type='text/javascript'>
    $(function(){
        var availableTags = [ ];
        <g:each in="${fullSkillList}" var="eachSkill">
           availableTags.push("${eachSkill}");
        </g:each>
        console.log("tags: "+availableTags);
        $("#tags").autocomplete({
            source: availableTags
        });
    });
</script>

您的控制器可能如下所示：

def search(){
    def skills = Skills.list()
    def response = []
    skills.each{
        response << "${it.name}"
    }
    println("getAllSkills response: ${response}")
    render(view: "search", model: [fullSkillList: response])
}

但是，这个解决方案的缺点是只加载（所有数据！）一次。

干杯！

使用Grails findByAll（）数组进行jQuery自动完成

2 个答案: