Question

Plz帮助我。当用户在文本字段中输入字母时，我需要实现搜索匹配的公司名称。在grails中，我们只有在提交周围的表单时才能从文本字段获取输入。但是我的情况我无法提交表单，因为，大多数字段在执行搜索时都是空的，而且不允许提交空字段。此外，我不能为此textField使用单独的表单，因为嵌套表单将被忽略浏览器。我现在该怎么办？以下是我的代码：

 <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>

Answer 1

看一下优秀的select2 javascript库。具体来说，请参阅“加载远程数据”部分。

Answer 2

好吧，你似乎只需要一个自动完成...阅读本文！

Grails autocomplete via jqueryui and AJAX

Answer 3

我建议使用可搜索插件

从http://grails.org/plugin/searchable

查看

如何在用户输入grails文本域中的值时执行搜索？

3 个答案: