Grails

Question

我正在尝试在我的输入字段中使用 jQuery UI 自动完成功能。这是我在控制器中的代码。

import grails.converters.*

class SomeController {
    def someClassList = {
        def list1 = SomeClass.list()
        def scList = []
        list1.each {
            scList.add(it.someClassAttribute)
        }
        render scList as JSON
    }
}

我有这个看法。

<head>
...
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
    <script>
        $(document).ready(function() {

            var someTags = "${someClassList}";
            $( "#tags" ).autocomplete({
                source: someTags,
                minLength: 2
            });

        });

</script>

但是当生成 gsp 代码时，它包括 <...autocomplete = "off"...>

<input type="text" name="someTitle" id="tags" required="" value="" class="ui-autocomplete-input" autocomplete="off">

我查看了 post Tokeninput Autocomplete not working in grails，但它对我不起作用。请帮忙。提前致谢。

编辑这是我在 _form.gsp.

中的 gsp 代码

<g:textField name="someTitle" id="tags" required="" value="${someClassInstance?.someTitle}"/>

编辑 - 附加问题 我将源代码更改为此并且有效。

source: "/myAppName/someControllerName/someClassList"

但是，整个自动完成列表都会显示，但不会缩小范围。有任何想法吗？

Answer 1

无后顾之忧添加为答案。对你有用的 link 是： http://ohmiserableme.blogspot.co.uk/2011/08/grails-jquery-ajax-autocomplete-with.html

下载 http://www.grails.org

的 Grails 应用程序框架

创建 grails 应用程序。

从 (http://www.jquery.com) 下载并安装 jQuery（将 JavaScript 文件复制到您的 grails app home web-app/js 文件夹）

下载并安装jQueryui插件

Create a domain class "City"

    package myapp
    class City {
        String city
        static constraints = {
            city nullable:false, blank:false, maxSize:200
        }
    }

create controller
grails create-controller city
edit the CityController,
import grails.converters.*
add
def ajaxCityFinder = {
   def citiesFound = City.withCriteria {
         ilike 'city', params.term + '%'
        } 
 render (citiesFound as JSON)
}

使用以下代码更新您的 gsp 文件：

<html>
    <head>
        <meta name="layout" content="main" />

        <link rel="stylesheet" href="${resource(dir:'css/smoothness',file:'jquery-ui-1.8.14.custom.css')}" />

        <g:javascript library="jquery.min" />
        <g:javascript library="jquery-ui-1.8.14.custom.min" />
        <g:javascript>
            $(document).ready(function() {
               $('#city').autocomplete({
                 source: '<g:createLink controller='city' action='ajaxCityFinder'/>'
               }); 

            });        
        </g:javascript>
    </head>
    <body>
        <div class="demo">
            <div class="ui-widget">
                <label for="city">City: </label>
                <input id="city">
            </div>
        </div>
    </body>
</html>

虽然我还没有测试过这个我仍然认为如果你每次按下一个键时在控制器中放一个 println 它会被发回以获得一个新列表不？

遗憾的是，ajax 就是这样运作的。

查看 boselecta plugin in my repo - take a look at how I have done auto complete in that plugin. As in HTML 5 Data List. You may find its nicer to work with. Actual gsp doing the auto complete. The component that receives the dataList from websockets.

我最近在这方面做了一些工作，因此 dataList id/Element 是可选的，并且第一个 gsp 底部的 javascript 将标签转换为选定值。

Grails - jQuery UI 自动完成不工作

Grails - jQuery UI Autocomplete not working

jquery

jquery-ui

autocomplete

grails-2.4