Question

我非常被困在这里。

我使用实时搜索查找脚本（AJAX）使用输入字段查找数据库中的客户。选择后，我点击我选择的客户。然后，我为客户填写的表格中填写了数据库中的详细信息。问题只是在点击字段填充数据后的某些时间。这是完全断断续续的，如果我重复点击同一个客户，他们最终会填充，看起来好像它突然工作并且失败就好像没有模式一样。

感谢您提前提供任何帮助：）

＆＃13;

// ########## LIVE SEARCH FUNCTION ########## //
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;    
});

jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#result").fadeOut(); 
    }
});
$('#searchid').click(function(){
    jQuery("#result").fadeIn();
});
});
// ########## LIVE SEARCH FUNCTION ########## //

// ########## DATA POPULATE FUNCTION ########## // NOT WORKING ALL THE TIME
$( document ).ajaxComplete(function() {

	jQuery("#result").live("click",function(e){ 
		var $clicked = $(e.target);
	
		$('#custid').val($clicked.find('.customerIdS').text());
		$('#firstName').val($clicked.find('.firstNameS').text());
		$('#lastName').val($clicked.find('.lastNameS').text());
		$('#companyName').val($clicked.find('.companyNameS').text());
		$('#streetAddressP').val($clicked.find('.streetAddressS').text());
		$('#suburbP').val($clicked.find('.suburbS').text());
		$('#stateP').val($clicked.find('.stateS').text());
		$('#postcodeP').val($clicked.find('.postcodeS').text());
		$('#phoneNumber').val($clicked.find('.phoneNumberS').text());
		$('#emailAddress').val($clicked.find('.emailAddressS').text());
	
	});
});
// ########## DATA POPULATE FUNCTION ########## // NOT WORKING ALL THE TIME

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="content" style="float:right;">

    <input id="searchid" class="search" type="text" placeholder="Search for customer using first name, last name or company name."></input>

<br></br>

<div id="result" style="display: none;">

    <div class="show" align="left">
        <div class="selection">
            <span class="customerIdS">

                3628

            </span>
            <span class="firstNameS">

                David

            </span>
            <span class="lastNameS">

                Dodrel

            </span>

             - 
                                    

            <span class="companyNameS"></span>

            ,
                                    

            <span class="streetAddressS">

                101 Woodward Place

            </span>

            ,
                                    

            <span class="suburbS">

                Suburb

            </span>
            <span class="stateS">

                State

            </span>
            <span class="postcodeS">

                Postcode

            </span>
            <span class="phoneNumberS"></span>
            <span class="emailAddressS"></span>
        </div>
    </div>

</div>



<div id="customerDetails" class="row">
    <div class="col-sm-6">
        <label for="firstName">First Name</label>
        <input type="text" name="firstName" id="firstName">
        <label for="lastName">Last Name</label>
        <input type="text" name="lastName" id="lastName">
        <label for="companyName">Company Name</label>
        <input type="text" name="companyName" id="companyName">
    </div>
    <div class="col-sm-6">
        <label for="phoneNumber">Phone Number</label>
        <input type="text" name="phoneNumber" id="phoneNumber">
        <label for="emailAddress">Email Address</label>
        <input type="text" name="emailAddress" id="emailAddress">
    </div>
</div>

＆＃13;

Answer 1

请尝试使用以下代码，而不是您的代码。另外，请查看解释我认为您的代码错误的评论。

jQuery(function(){
    jQuery(".search").on("keyup", function() {
        var searchId, dataString;
        searchId = jQuery(this).val();
        dataString = "search=" + searchId;
        if (searchId) {
            jQuery.ajax({
                type: "POST",
                url: "search.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    jQuery("#result").html(html).show();
                }
            });
        }
    });
    jQuery(document).on("click", function(e){
        //No need to use "live" here since this whole block of code will be executed once the DOM is ready
        var $clicked = jQuery(e.target);
        if (!$clicked.hasClass("search")) {
            jQuery("#result").fadeOut(); 
        }
    });
    jQuery("#searchid").on("click", function(){
        jQuery("#result").fadeIn();
    });
    //This is only attached once since your "#results" div is there from the beginning and you only change its content, you don't remove and attach it again.
    jQuery("#result").on("click", ".selection", function(e){
        //You were getting jQuery(e.target) but i assume it wasn't what you wanted since you were getting the element that was clicked inside "#result" and not "#result" itself (that is where you find your content and then assign values based on it)
        var $clicked = jQuery(this);
        jQuery('#custid').val($clicked.find('.customerIdS').text().trim());
        jQuery('#firstName').val($clicked.find('.firstNameS').text().trim());
        jQuery('#lastName').val($clicked.find('.lastNameS').text().trim());
        jQuery('#companyName').val($clicked.find('.companyNameS').text().trim());
        jQuery('#streetAddressP').val($clicked.find('.streetAddressS').text().trim());
        jQuery('#suburbP').val($clicked.find('.suburbS').text().trim());
        jQuery('#stateP').val($clicked.find('.stateS').text().trim());
        jQuery('#postcodeP').val($clicked.find('.postcodeS').text().trim());
        jQuery('#phoneNumber').val($clicked.find('.phoneNumberS').text().trim());
        jQuery('#emailAddress').val($clicked.find('.emailAddressS').text().trim());
    });    

});

jQuery函数间歇性地工作

1 个答案: