Forms 当用户在grails的textfield中输入值时，如何执行搜索？

请帮助我。当用户在文本字段中输入字母时，我需要执行匹配公司名称的搜索。在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>

联系人-${contactType？.id}.organizationName
//这是我尝试过的，但对我的案子没用。。。
联系人-${contactType？.id}.firstName
联系人-${contactType？.id}.lastName
联系人-${contactType？.id}.phoneCountryCode
-
-
联系人-${contactType？.id}.email
联系人-${contactType？.id}.address1
联系人-${contactType？.id}.address2
联系人-${contactType？.id}.city
联系人-${contactType？.id}.stateProvince
联系人-${contactType？.id}.postalCode
联系人-${contactType？.id}.countryCode
联系人-${contactType？.id}。包括

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

看来您只需要一个自动完成。。。读这个

---

我建议使用可搜索插件

---

从

中查看您想要的是自动完成吗？（类似这样的内容：）