2013-11-04 87 views
0

Plz帮助我。我需要在用户在文本字段中输入字母时实现对匹配公司名称的搜索。在Grails中,只有当我们提交周围的表单时,我们才能从文本字段获得输入。但是在我我无法提交表单,因为大多数字段在执行搜索时都是空的,同时不允许提交空字段。另外,我无法为此文本字段使用单独的表单,因为嵌套表单将被浏览器忽略?。所以我现在应该做的下面是我的代码:如何在用户在grails的文本框中输入值时执行搜索?

<div id="contact-${contactType.id}" class="contact" style="${contactType.isPrimary == 1 ? '' : 'display: none;'}"> 

<g:hiddenField name="contact-${contactType?.id}.id" value="${contact?.id}"/> 


<g:applyLayout name="form/input"> 
    <content tag="label"><g:message code="prompt.organization.name"/></content> 
    <content tag="label.for">contact-${contactType?.id}.organizationName</content> 
    <g:textField class="field" name="Company" value="search for..." /> 
    <g:submitButton id="button" class="buttons" name="Search" value="Search" action="search" src="/jbilling/images/icon-search.gif" style= "background-color:#191DD4 text-color:#FFFFFF"/>//This is what i tried but not useful for my case... 
</g:applyLayout> 


    <g:applyLayout name="form/input"> 
    <content tag="label"><g:message code="prompt.first.name"/></content> 
    <content tag="label.for">contact-${contactType?.id}.firstName</content> 
    <g:textField class="field" name="contact-${contactType?.id}.firstName" value="${contact?.firstName}" /> 
</g:applyLayout> 

<g:applyLayout name="form/input"> 
    <content tag="label"><g:message code="prompt.last.name"/></content> 
    <content tag="label.for">contact-${contactType?.id}.lastName</content> 
    <g:textField class="field" name="contact-${contactType?.id}.lastName" value="${contact?.lastName}" /> 
</g:applyLayout> 

<g:applyLayout name="form/text"> 
    <content tag="label"><g:message code="prompt.phone.number"/></content> 
    <content tag="label.for">contact-${contactType?.id}.phoneCountryCode</content> 
    <span> 
     <g:textField class="field" name="contact-${contactType?.id}.phoneCountryCode" value="${contact?.phoneCountryCode}" maxlength="3" size="2"/> 
     - 
     <g:textField class="field" name="contact-${contactType?.id}.phoneAreaCode" value="${contact?.phoneAreaCode}" maxlength="5" size="3"/> 
     - 
     <g:textField class="field" name="contact-${contactType?.id}.phoneNumber" value="${contact?.phoneNumber}" maxlength="10" size="8"/> 
    </span> 
</g:applyLayout> 

<g:applyLayout name="form/input"> 
    <content tag="label"><g:message code="prompt.email"/></content> 
    <content tag="label.for">contact-${contactType?.id}.email</content> 
    <g:textField class="field" name="contact-${contactType?.id}.email" value="${contact?.email}" /> 
</g:applyLayout> 

<g:applyLayout name="form/input"> 
    <content tag="label"><g:message code="prompt.address1"/></content> 
    <content tag="label.for">contact-${contactType?.id}.address1</content> 
    <g:textField class="field" name="contact-${contactType?.id}.address1" value="${contact?.address1}" /> 
</g:applyLayout> 

    <g:applyLayout name="form/input"> 
    <content tag="label"><g:message code="prompt.address2"/></content> 
    <content tag="label.for">contact-${contactType?.id}.address2</content> 
    <g:textField class="field" name="contact-${contactType?.id}.address2" value="${contact?.address2}" /> 
</g:applyLayout> 

    <g:applyLayout name="form/input"> 
    <content tag="label"><g:message code="prompt.city"/></content> 
    <content tag="label.for">contact-${contactType?.id}.city</content> 
    <g:textField class="field" name="contact-${contactType?.id}.city" value="${contact?.city}" /> 
    </g:applyLayout> 

    <g:applyLayout name="form/input"> 
    <content tag="label"><g:message code="prompt.state"/></content> 
    <content tag="label.for">contact-${contactType?.id}.stateProvince</content> 
    <g:textField class="field" name="contact-${contactType?.id}.stateProvince" value="${contact?.stateProvince}" /> 
</g:applyLayout> 

<g:applyLayout name="form/input"> 
    <content tag="label"><g:message code="prompt.zip"/></content> 
    <content tag="label.for">contact-${contactType?.id}.postalCode</content> 
    <g:textField class="field" name="contact-${contactType?.id}.postalCode" value="${contact?.postalCode}" /> 
</g:applyLayout> 

<g:applyLayout name="form/select"> 
    <content tag="label"><g:message code="prompt.country"/></content> 
    <content tag="label.for">contact-${contactType?.id}.countryCode</content> 

    <g:select name="contact-${contactType?.id}.countryCode" 
       from="${CountryDTO.list()}" 
       optionKey="code" 
       optionValue="${{ it.getDescription(session['language_id']) }}" 
       noSelection="['': message(code: 'default.no.selection')]" 
       value="${contact?.countryCode}"/> 
</g:applyLayout> 

<g:applyLayout name="form/checkbox"> 
    <content tag="label"><g:message code="prompt.include.in.notifications"/></content> 
    <content tag="label.for">contact-${contactType?.id}.include</content> 
    <g:checkBox class="cb checkbox" name="contact-${contactType?.id}.include" checked="${contact?.include}"/> 
</g:applyLayout> 
</div> 
+3

检查出来是你想要的自动完成? (如下所示:http://jay-chandran.blogspot.com.br/2011/09/using-grails-with-jquery-autocomplete.html) – elias

回答

1

看看优秀select2 JavaScript库。具体来说,请参阅“加载远程数据”部分。

相关问题