草庐IT

javascript - 制作搜索功能ajax

coder 2023-10-11 原文

您好,我正在尝试在我的项目中创建一个 ajax 搜索功能。

应用程序首先将所有客户数据加载到网页上的表格中。 如果在搜索栏上输入了某些内容, 我希望显示搜索到的数据而不是所有客户数据。

我尝试了各种方法,但都没有达到我预期的效果。

首先,我添加了功能来检查它在搜索栏中是否有任何值,如果它有任何值,它将尝试在数据库中查找并获取数据。但如果它没有任何值,它将默认显示所有客户端数据。

这是我的示例脚本代码

// READ records
function readRecords() {
    var searchbar = $("#search").val();
    
    if (searchbar.val() > 0) {
        $.post("ajax/search.php", {
            searchbar: searchbar
        }, function (data, status) {
        $(".records_content").html(data);
        }); 
    } else {
        $.get("ajax/readRecords.php", {}, function (data, status) {
        $(".records_content").html(data);
        });
    }
}

索引代码片段

<!-- Content Section -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Client List</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="pull-xs-right">
                <button class="btn btn-success" data-toggle="modal" data-target="#add_new_record_modal">Add New Client</button>
            </div>
            <div class="col-sm-3">
                <form class="form-inline global-search" role="form" method="POST" onsubmit="readRecords()">
                    <div class="form-group">
                        <input type="text" class="form-control" id="search"  placeholder="Search">
                        <button type="submit" id="search" class="btn btn-primary">Search</button>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
    <div class="row">
        <div class ="col-lg-12">
            <!--Where the results will be printed-->
            <div class="records_content"></div>
        </div>
    </div>
</div>

搜索.php

<?php 
    if(isset($_POST['search']) && isset($_POST['search']) != "") {
    // include Database connection file  
    include("SQLFunctions.php"); 

    // Design initial table header  
    $data = '<table class="table table-bordered"> 
                        <tr> 
                            <th>No.</th> 
                            <th>Surname</th> 
                            <th>Name</th> 
                            <th>Address</th> 
                            <th>Telephone</th> 
                            <th>Inspection</th> 
                            <th>Model</th> 
                            <th>Serial Number</th> 
                            <th>Notes</th> 
                            <th>A/S Request</th>
                            <th>Update</th> 
                            <th>Delete</th> 
                        </tr>'; 
    
    $search = $_POST['search'];
    
    $searchquery = "SELECT Surname
                ,Name
                ,Address
                ,Telephone
                ,DATE_FORMAT(PurchaseDate, '%Y-%m-%d')
                ,Model
                ,SerialNumber
                ,Notes
                FROM Clients
                WHERE Surname LIKE '%".$search."%' OR Name LIKE '%".$search."%' OR Model Like '%".$search."%'";
    
    $link = connectDB();

    ;
    
    // if query results contains rows then fetch those rows  
    if($result = mysqli_query($link, $searchquery)) 
    { 
        $number = 1; 
        while($row = mysqli_fetch_assoc($result)) 
        { 
            $data .= '<tr> 
                <td>'.$number.'</td> 
                <td>'.$row['Surname'].'</td> 
                <td>'.$row['Name'].'</td> 
                <td>'.$row['Address'].'</td> 
                <td>'.$row['Telephone'].'</td> 
                <td>'.$row['PurchaseDate'].'</td> 
                <td>'.$row['Model'].'</td> 
                <td>'.$row['SerialNumber'].'</td> 
                <td>'.$row['Notes'].'</td> 
                <td> 
                    <button onclick="Request('.$row['id'].')" class="btn btn-primary">A/S Request</button> 
                </td>
                <td> 
                    <button onclick="GetUserDetails('.$row['id'].')" class="btn btn-warning">Update</button> 
                </td> 
                <td> 
                    <button onclick="DeleteUser('.$row['id'].')" class="btn btn-danger">Delete</button> 
                </td> 
            </tr>'; 
            $number++; 
        } 
    } 
    else 
    { 
        // records now found  
        $data .= '<tr><td colspan="6">Records not found!</td></tr>'; 
    } 

    $data .= '</table>'; 

    echo $data;
    }
?> 

当我运行这个项目时,一切正常,但是当我在搜索栏中输入任何值时,它会给出相同的所有客户结果。

我正在尝试找出使该功能发挥作用的最佳方式。任何提示将不胜感激提前谢谢

最佳答案

阻止默认提交事件

onsubmit="readRecords(this)"

function readRecords(e) {
    e.preventDefault();
    var searchbar = $("#search").val();

    if (searchbar.val() > 0) {
        $.post("ajax/search.php", {
            searchbar: searchbar
        }, function (data, status) {
        $(".records_content").html(data);
        }); 
    } else {
        $.get("ajax/readRecords.php", {}, function (data, status) {
        $(".records_content").html(data);
        });
    }
}

关于javascript - 制作搜索功能ajax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40479400/

有关javascript - 制作搜索功能ajax的更多相关文章

  1. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索,因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索?require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  2. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  3. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能? - 2

    只是想确保我理解了事情。据我目前收集到的信息,Cucumber只是一个“包装器”,或者是一种通过将事物分类为功能和步骤来组织测试的好方法,其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗? 最佳答案 有点。它是一种组织测试的方式,但不仅如此。它的行为就像最初的Rails集成测试一样,但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意,您可以使用步骤来构建对象和设置状态,但通常您

  4. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  5. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题,今天小编就来解答与大家分享一下动漫制作流程,为了帮助有兴趣的同学理解,大多数人会选择动漫培训机构,那么今天小编就带大家来看看动漫制作要掌握哪些技巧?一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性,以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料,可以是手绘也可以是3d软件创建。在此步骤中,要注意的问题是色彩和平面布局。三、动漫制作制作完成后,加工成型。完成不同的表现形式后,就要对设计稿进行加工处理,使加工的难易度降低,并得到一些基本准确的概念,以便于后续的大样、准确的尺寸制定。四、

  6. ruby - 如何搜索有用的 ruby - 2

    寻找有用的ruby的好网站是什么? 最佳答案 AgileWebDevelopment列出插件(虽然不是ruby​​gems,我不确定为什么),并允许人们对它们进行评级。RubyToolbox按类别列出gem并比较它们的受欢迎程度。Rubygems有一个搜索框。StackOverflow对最有用的rails插件和ruby​​gems有疑问。 关于ruby-如何搜索有用的ruby,我们在StackOverflow上找到一个类似的问题: https://stacko

  7. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ? - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单,用户可以在其中添加一个唯一的电子邮件,并让电子邮件测试将其发送到该特定电子邮件。为了简单起见,我决定让测试电子邮件通过ajax执行,并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  8. ruby - 如何搜索、递增和替换 Ruby 字符串中的整数子字符串? - 2

    我有很多这样的文档:foo_1foo_2foo_3bar_1foo_4...我想通过获取foo_[X]的所有实例并将它们中的每一个替换为foo_[X+1]来转换它们。在这个例子中:foo_2foo_3foo_4bar_1foo_5...我可以用gsub和一个block来做到这一点吗?如果不是,最干净的方法是什么?我真的在寻找一个优雅的解决方案,因为我总是可以暴力破解它,但我觉得有一些正则表达式技巧值得学习。 最佳答案 我(完全)不懂Ruby,但类似这样的东西应该可以工作:"foo_1foo_2".gsub(/(foo_)(\d+)/

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. ruby - Ruby 中的必应搜索 API - 2

    我读了"BingSearchAPI-QuickStart"但我不知道如何在Ruby中发出这个http请求(Weary)如何在Ruby中翻译“Stream_context_create()”?这是什么意思?"BingSearchAPI-QuickStart"我想使用RubySDK,但我发现那些已被弃用前(Rbing)https://github.com/mikedemers/rbing您知道Bing搜索API的最新包装器(仅限Web的结果)吗? 最佳答案 好吧,经过一个小时的挫折,我想出了一个办法来做到这一点。这段代码很糟糕,因为它是

随机推荐