2015-05-13 81 views
1

我有疑問如何使用搜索框使用ajax搜索電話號碼?以下是上述問題的編碼。使用AJAX搜索電話號碼

<script type="text/javascript"> 
$(document).ready(function($){ 
    $('#query').keyup(function(){ 
     var search=$(this).val(); 
     if(search != '' & search.length >= 3){ 
      $.ajax({ 
       url:'search.php', 
       data:'search='+search+'action=search_number', 
       type:'POST', 
       cache:false, 
       success:function(html){ 
        $("#result_search").html(html).show(); 
       } 
      }); 
     }else{ $("#result_search").fadeOut(); return false;} 

    }); 
    jQuery('#result_search').on('click',function(e){ 
     var $clicked = $(e.target); 
     var $name = $clicked.find('.city').html(); 
     var decoded = $("<div/>").html($name).text(); 
     $('#query').val(decoded); 
    }); 
    jQuery(document).on("click",function(e){ 
     var $clicked = $(e.target); 
     if (! $clicked.hasClass("search")){ 
      $("#result_search").fadeOut(); 
     } 
    }); 
    $('#query').click(function(e){ 
     var result_search= $("#results_search").html(); 
     var search=$('#query').val(); 
     if(result_search != 'No Contacts Found' && result_search != '' && search != ''){ 
      $("#result_search").fadeIn(); 
     } 
    }); 


}); 

<form method = "post" action="search.php" class = "pull-down navbar-search"> 
    <div class="input-group"> 
       <input type="text" value="" name="query" id="query" placeholder="Search phone number or email" class="form-control"> 
        <div class="input-group-btn"> 
        <button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
       </div> 
      </div> 
    </form> 

它顯示搜索框如下圖像。 enter image description here

我已經像上面的方法一樣搜索城市了。像下面的圖片一樣,我也想要搜索電話號碼。

enter image description here

如果我們在搜索框鍵入數字,它應該搜索和每個號碼匹配顯示結果。

我從數據庫中獲得價值。 任何人都可以在這個問題上提供幫助嗎?

在此先感謝。

回答

1

當您進行AJAX調用時,您沒有正確傳遞data屬性。你逝去的:

data:'search='+search+'action=search_number', 

,它應該是:

data:'search='+search+'&action=search_number', 

注意添加&的分離參數。

或者,您也可以將您的數據作爲對象文本,讓jQuery的爲你做它:

data: { 
    search: search, 
    action: 'search_number' 
} 
+0

@ cillosis:精確解,謝謝:-) –