使用AJAX搜索电话号码

时间:2015-05-13 13:26:50

标签: php ajax

我怀疑如何使用ajax使用searchbox搜索电话号码?以下是上述问题的编码。

<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 个答案:

答案 0 :(得分:1)

当您进行AJAX调用时,您没有正确传递data属性。你正在路过:

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

它应该在哪里:

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

请注意,&添加了单独的参数。

或者,您可以将数据作为对象文字传递,让jQuery为您完成:

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