如果 jquery 自动完成返回结果，则禁用按钮

Question

我正在使用 jquery 自动完成功能从 Coldfusion CFC 中获取数据并在用户键入时显示匹配的数据。

该部分正在工作，但我想禁用提交按钮并在返回数据时显示一条消息，因为这告诉我数据不是唯一的，它需要是。

我可以让它工作，但是一旦我的消息出现“名称必须是唯一的”并且按钮被禁用，它就不会重新启用并将该消息更改为“名称是唯一的”。

我做错了什么？

这是我的 CFC：

    <cffunction name="lookupCustomers" access="remote" output="no" hint="I return a list of customers" returnformat="JSON">
<cfargument name="term" required="false" default="" />

<!--- Define variables --->
<cfset var returnArray =ArrayNew(1)>

<!--- Do search --->
<cfquery name="data" datasource="#datasource#">
    select company_name
    From customer_table
    where company_name LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.term#%" />
    order by company_name
</cfquery>

    <cfif #data.recordcount# eq 0>
        <!--- Build result array --->
    

        <cfset titleStruct = structNew() />
        <cfset titleStruct['value'] = 'No results'/>
        <cfset titleStruct['label'] = 'No results' />

        <cfset arrayAppend(returnArray,titleStruct) />    
    

    <!--- And return it --->
    <cfreturn returnArray />
        
        
    <cfelse>

    <!--- Build result array --->
    <cfloop query="data">

        <cfset titleStruct = structNew() />
        <cfset titleStruct['value'] = company_name/>
        <cfset titleStruct['label'] = company_name />

        <cfset arrayAppend(returnArray,titleStruct) />    
    </cfloop>

    <!--- And return it --->
    <cfreturn returnArray />
    
    </cfif> 
</cffunction>

这是我的 Javascript：

<!---Autocomplete for customer name--->
<script>  
$(document).ready(function() {  
         $( "#new_customer_name" ).autocomplete({
                source: "cfcs/existing_customers_lookup.cfc?method=lookupCustomers&returnformat=json",
                minLength: 1,
                select: function(event, ui) {
                    $('#new_customer_name').val(ui.item.value);
                },
                response: function(event, ui) {
                    // ui.content is the array that's about to be sent to the response callback.
                    if (ui.content.length == 0) {
                        $("#empty-message").text( "" );
                        //$("#empty-message").text( "Name is Unique" );
                        $("#add_new_customer_btn").prop('disabled', False);

                    } else if (ui.content.length != 0)  {
                        $("#empty-message").text( "Name MUST BE Unique" );
                         $("#add_new_customer_btn").prop('disabled', true);
                    }
                }
                });           
});
</script>

这是我的表格：

    <!--- New customer modal --->                        
<div id="new-customer-modal" style="display:none; width:50%; padding:10px;">
    <fieldset>
    <legend><h1>New Customer Form</h1></legend>
        <form name="add_customer" id="add_customer">
        <input name="new_customer_name" id="new_customer_name" type="text" required placeholder="Customer Name"><br><br>
        
        <strong>Primary Contact*:</strong><br>
        <input name="new_first_name" id="new_first_name" type="text" required placeholder="First Name*"> &nbsp;
        <input name="new_middle_name" id="new_middle_name" type="text" placeholder="Middle Initial/Name" size="15"> &nbsp;
        <input name="new_last_name" id="new_last_name" type="text" required placeholder="Last Name*"> &nbsp;
        <br><br>
        
        <input name="new_email_address" id="new_email_address" type="email" required placeholder="Email Address"><br>
        <input name="new_primary_phone" id="new_primary_phone" type="text" required placeholder="Primary Phone Number"><br>
        <input name="new_alternate_phone" id="new_alternate_phone" type="text" placeholder="Alternate Phone Number"><br><br>
        
        <strong>Company Address:</strong><br>
        <input name="new_address1" id="new_address1" type="text" required placeholder="Address 1"><br>
        <input name="new_address2" id="new_address2" type="text" placeholder="Address 2"><br>
        <input name="new_city" id="new_city" type="text" required placeholder="City"><br>
        <input name="new_state" id="new_state" type="text" required placeholder="State"><br>
        <input name="new_zip" id="new_zip" type="text" required placeholder="Zip"><br><br>

        <br><br>
        <input type="hidden" name="customer_type" value="billable">
        <input type="hidden" name="ticket_type" value="billable">

        <input class="stylized_btn" type="submit" value="Add Customer"><div class="response" id="addCustomerMessage"></div>

</form>
</fieldset>

Answer 1

我最终能够弄清楚我自己。我创建了一个单独的函数来检查输入到该字段中的名称。最大的区别是返回一个字符串而不是一个查询并以这种方式测试输出。

在那个函数中，我包含了一个 if 语句来根据结果执行任务。我还创建了另一个 CFC 函数，专门用于根据输入的内容查询数据库。

希望这对某人有所帮助。

这是我的 javascript：

<script>  
$(document).ready(function() {  
         $( "#new_customer_name" ).autocomplete({
                source: "cfcs/existing_customers_lookup.cfc?method=lookupCustomers&returnformat=json",
                minLength: 1,
                select: function(event, ui) {
                    $('#new_customer_name').val(ui.item.value);
                },
                response: function(event, ui) {
                }
                
                });           
});
</script>
    
<script>

    function check_customer_name() {
      <!--- Get customer name --->
            $.ajax({
                dataType: 'json',
                data:  {
                            check_customer_name: $('#new_customer_name').val()
                        },
                url: "cfcs/existing_customers_lookup.cfc?method=checkCustomers&returnformat=json",
                beforeSend: function(){
                    $('.loader').show();
                },
                complete: function(){
                     $('.loader').hide(3000);
                },
                success: function(response) {
                  // ui.content is the array that's about to be sent to the response callback.
                    console.log(response);
                    if ( response == 'unique') {
                        document.getElementById("empty-message").style.color = 'green';
                        document.getElementById('empty-message').innerHTML = "This company name is unique.";
                        $("#add_new_customer_btn").prop('disabled', false);
                         
                    } else {
                        document.getElementById("empty-message").style.color = 'red ';
                        document.getElementById('empty-message').innerHTML = "Company name not unique. Please try again.";
                        $("#add_new_customer_btn").prop('disabled', true);
                                                    
                    } 
                }    
            });
    }
</script>     

这是我的表格：

<fieldset>
<legend><h1>New Customer Form</h1></legend>
    <form name="add_customer" id="add_customer" method="post" action="actionpages/add_customer.cfm">
    <input name="new_customer_name" id="new_customer_name" type="text" required placeholder="Customer Name" onblur:"check_customer_name();" onFocus="check_customer_name();" onChange="check_customer_name();"><pre class="response" id="empty-message"></pre><br><br>
    
    <strong>Primary Contact*:</strong><br>
    <input name="new_first_name" id="new_first_name" type="text" required placeholder="First Name*"> &nbsp;
    <input name="new_middle_name" id="new_middle_name" type="text" placeholder="Middle Initial/Name" size="15"> &nbsp;
    <input name="new_last_name" id="new_last_name" type="text" required placeholder="Last Name*"> &nbsp;
    <br><br>
    
    <input name="new_email_address" id="new_email_address" type="email" required placeholder="Email Address"><br>
    <input name="new_primary_phone" id="new_primary_phone" type="text" required placeholder="Primary Phone Number"><br>
    <input name="new_alternate_phone" id="new_alternate_phone" type="text" placeholder="Alternate Phone Number"><br><br>
    
    <strong>Company Address:</strong><br>
    <input name="new_address1" id="new_address1" type="text" required placeholder="Address 1"><br>
    <input name="new_address2" id="new_address2" type="text" placeholder="Address 2"><br>
    <input name="new_city" id="new_city" type="text" required placeholder="City"><br>
    <input name="new_state" id="new_state" type="text" required placeholder="State"><br>
    <input name="new_zip" id="new_zip" type="text" required placeholder="Zip"><br><br>

    <br><br>
    <input type="hidden" name="customer_type" value="billable">
    <input type="hidden" name="ticket_type" value="billable">

    <input class="stylized_btn" type="submit" value="Add Customer"><div class="response" id="addCustomerMessage"></div>

</form>
</fieldset>

这是我的 CFC 函数：

    <cffunction name="lookupCustomers" access="remote" output="no" hint="I return a list of customers" returnformat="JSON">
<cfargument name="term" required="false" default="" />

<!--- Define variables --->
<cfset var returnArray =ArrayNew(1)>

<!--- Do search --->
<cfquery name="data" datasource="#datasource#">
    select company_name
    From customer_table
    where company_name LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.term#%" />
    order by company_name
</cfquery>

    

    <!--- Build result array --->
    <cfloop query="data">

        <cfset titleStruct = structNew() />
        <cfset titleStruct['value'] = company_name/>
        <cfset titleStruct['label'] = company_name />

        <cfset arrayAppend(returnArray,titleStruct) />    
    </cfloop>

    <!--- And return it --->
    <cfreturn returnArray />
    
    
</cffunction>



<cffunction name="checkCustomers" access="remote" output="no" hint="I return a list of customers" returnformat="string">
<cfargument name="check_customer_name" required="false" default="" />

<!--- localize function variables --->
    <cfset var data = "">
<!--- Do search --->
<cfoutput>
<cfquery name="data" datasource="#datasource#">
    select company_name
    From customer_table
    where company_name = <cfqueryparam value="#ARGUMENTS.check_customer_name#" cfsqltype="cf_sql_varchar">
</cfquery>

<cfif #data.recordcount# eq 0>
    <cfset result = "unique">
<cfelse>
    <cfset result = "taken">
</cfif>

    <!--- And return it --->
    <cfreturn result />
</cfoutput>
</cffunction>