Grails的 - jQuery UI的自动完成不工作 [英] Grails - jQuery UI Autocomplete not working
问题描述
我试图使用jQuery UI自动完成我的输入字段。
这是我的控制器code。
I'm trying to use jQuery UI Autocomplete in my input field. This is my code in controller.
import grails.converters.*
class SomeController {
def someClassList = {
def list1 = SomeClass.list()
def scList = []
list1.each {
scList.add(it.someClassAttribute)
}
render scList as JSON
}
}
我有这个在我看来。
I have this in my view.
<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 code，它包括＆LT; ...自动完成=关闭...>
But when gsp code is generated it includes <...autocomplete = "off"...>
<input type="text" name="someTitle" id="tags" required="" value="" class="ui-autocomplete-input" autocomplete="off">
我看了看后的Tokeninput自动完成不Grails的工作，但它不是为我工作。
请帮忙。先谢谢了。
I looked at the post Tokeninput Autocomplete not working in grails but it is not working for me. Please help. Thanks in advance.
修改
这里面_form.gsp我GSP code。
EDIT This is my gsp code inside _form.gsp.
<g:textField name="someTitle" id="tags" required="" value="${someClassInstance?.someTitle}"/>
编辑 - 附加问题
我改变了源这个和它的作品。
EDIT - ADDITIONAL QUESTION I changed the source to this and it works.
source: "/myAppName/someControllerName/someClassList"
但整个自动完成列表节目和doen't缩小。有任何想法吗？
BUT, the entire autocomplete list shows and doen't narrow down. Any ideas?
推荐答案
无后顾之忧添加为答案。为你工作的联系是：
的http://ohmiserableme.blogspot.co.uk/2011/08/grails-jquery-ajax-autocomplete-with.html
no worries added as answer. The link that worked for you was: http://ohmiserableme.blogspot.co.uk/2011/08/grails-jquery-ajax-autocomplete-with.html
下载Grails应用程序框架 http://www.grails.org
Download Grails application framework for http://www.grails.org
创建Grails应用程序。
Create grails application.
下载并安装由jQuery的（ http://www.jquery.com ）（JavaScript文件复制到你的Grails应用主web应用程序/ JS文件夹）
Download and install jQuery from (http://www.jquery.com) (copy the JavaScript files to your grails app home web-app/js folder)
下载并安装jQuery UI的插件
Download and install jQuery ui plugin
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)
}
更新您的有以下code GSP文件：
Update your gsp file with the following code:
<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 控制器你preSS的关键就被送回获得新的列表没有？
Although I haven't tested this I still think if you put a println in the controller each time you press a key it is sent back to get a new list no ?
可悲的是它是如何Ajax的工作原理。
Sadly it's how ajax works.
查看 boselecta插件在我的回购 - 看看我怎么有完成自动完成该插件。作为HTML 5的数据列表。您可能会发现它更好的工作。 <一href=\"https://github.com/vahidhedayati/grails-boselecta-plugin/blob/master/grails-app/views/boselecta/_genAutoComplete.gsp\"相对=nofollow>实际GSP做自动完成。该
Check out the 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 /元是可选择和JavaScript在第一GSP的底部转换标签来选择的值。
I recently did some work on this so that the dataList id/Element are selectable and javascript at bottom of first gsp converts the labels to selected values.
这篇关于Grails的 - jQuery UI的自动完成不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
