JQuery UI 自动完成，在 DOM 中加载所有数据，而不是从 mysql DB 中获取

Posted 2023-05-09

【中文标题】JQuery UI 自动完成，在 DOM 中加载所有数据，而不是从 mysql DB 中获取

【英文标题】：JQuery UI autocomplete, Load all Data in DOM instead taking from mysql DB

【发布时间】：2014-08-01 15:34:50

【问题描述】：

原因：想要加快自动完成结果

我有什么：我有两个输入框。一个是类别，另一个是品种。首先我选择类别，

$("#category").autocomplete(
    autoFocus: true,
    source: function(request, response) 
        $.getJSON("./php/autocompletenontex_getcategory.php",  category: request.term , response);
    ,
    minLength: 0,
    select: function( event, ui ) 
        $('#variety').focus();
    
).focus(function() 
        $(this).autocomplete("search", "");
);

上面的代码在开始输入之前显示了自动完成结果。

我的 PHP 代码是： //包含数据库连接后

$category =  $_REQUEST["category"];
    $sql = "SELECT distinct(category) FROM master_nontextile WHERE category LIKE '%".$category."%'";
    $result = mysql_query($sql);
    while($row = mysql_fetch_array($result))
        $results[] = array('label' => $row['category'], 'value' => $row['category']);
    
    echo json_encode($results);

下一个输入字段是品种 - 品种自动完成结果基于类别的选择。代码如下

$("#variety").autocomplete(
    autoFocus: true,
    source: function(request, response) 
        $.getJSON("./php/autocompletenontex_getvariety.php",  variety: request.term, category: $("#category").val() , response);
    ,
    minLength: 0,
    select: function( event, ui ) 
        $('#variety').val(ui.item.variety);
        $('#price').val(ui.item.price);
        $('#quantity').focus();
    
).focus(function() 
        $(this).autocomplete("search", "");
);

对应的PHP为：

//after including DB connection
    $stmt = $pdo->prepare("SELECT variety, price FROM master_nontextile WHERE category = '$category' AND ( variety LIKE '%".$variety."%' OR price ='$variety' ) ORDER BY variety ASC"); $stmt->execute();
    while($row = $stmt->fetch())
        $results[] = array('label' => $row['variety'].' - '.$row['price'], 'value' => $row['variety'], 'price' => $row['price']);
    
    echo json_encode($results);

问题： 我们有一个计费应用程序。在品种字段中，他们可以输入品种名称或价格。 在输入自动完成结果时会显示 1 秒后的结果（客户觉得这太迟了）。 所以我需要它在输入价格或品种名称时快速填充。 我认为建立联系需要时间，然后退休需要时间。

我知道我们可以使用 ajax 请求 link here 在页面加载时加载数据 此解决方案适用于一个独立的自动完成字段。但是我有两个输入字段，第二个的结果取决于第一个。那么我如何在不去数据库的情况下实现它呢？

【问题讨论】：

啊！我在等待答案

【参考方案1】：

您的问题是您获取数据的速度比您预期的要慢。您受到数据库返回结果的速度的限制。我可以建议您关注以加快速度。

不要为每个请求从 php 建立到 mysql 的新连接。启用数据库连接池。它大大提高了性能。我不知道如何在 php 中做连接池。 This 可能会有所帮助。

如果可能的话将结果缓存在php中，这样你就不会每次都访问db。

使用外部服务为自动完成提供数据。看Autocomplete as a Service

【讨论】：

爱你，伙计！这一行解决了我的问题（我的应用程序仅在本地运行） $dbh = new PDO('mysql:host=localhost;dbname=test', $user, $pass, array( PDO::ATTR_PERSISTENT => true ));