2013-11-04 129 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庫。具體來說,請參閱「加載遠程數據」部分。

相關問題