Question

我尝试在输入字段中使用jQuery UI Autocomplete。这是我在控制器中的代码。

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代码时，它包含＆lt; ... autocomplete =＆＃34; off＆＃34; ...＆gt;

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

我查看了帖子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

没有后顾之忧。适合您的链接是： 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文件夹）

下载并安装jQuery ui插件

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 - 看看我在该插件中如何完成自动完成功能。与HTML 5数据列表中一样。您可能会发现它更好用。 Actual gsp doing the auto complete。 receives the dataList from websockets.

的组件

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

Grails - jQuery UI自动完成无法正常工作

1 个答案: