使用"value"(或其他属性)在自动完成小部件中获取下拉结果 - jQuery-UI

Question

我使用一组对象作为搜索条件，使用自动完成小工具，一切都正常。每个对象都有如下属性：

{
   value: "spider",
   label: "Grass Spider",
      ...
}

自动完成小部件似乎只搜索label的值，而忽略value。如果我搜索"spider"，前面的示例将显示在搜索中，但如果我将value更改为类似于此value: "spider (t1)"，我希望能够键入"t1"或"（t1）"并使其显示在搜索中将。

有没有办法让小部件查看value，或者除了使用label属性之外，还有没有办法指定在获取搜索结果时要使用的其他属性。

Answer 1

这一切都取决于如何检索数据。最终，自动完成插件将查看标签，但您可以从结果集中获得不同的值，并以这种方式获得成功。关于如何做到这一点的示例如下：

php

<?php
    // this example will be our source file where all the data comes from
    // and say that we are pulling from a database     
    $term = $_POST['term'];  // term is always the search values post name
    $q = "SELECT id, first_name, last_name FROM Customer WHERE CONCAT(first_name + ' ' + last_name) LIKE ?";
    $stmt = $dbh->prepare($q);
    $stmt->execute(array("%$term$"));
    // generate a new results arrays
    $results = array();
    while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $results[] = array(
            'label' => $row['first_name']." ".$row['last_name'],
            'value' => $row['id']
        );
    }
    echo json_encode($results);
?>

简而言之，这个PHP文件允许您通过在select查询上连接多个表列来查看多个项。如果你愿意，你可以为每个项目存储一个不同于标签的值，否则标签很可能是你的默认值，那么我们如何在javascript方面纠正这一点呢？

javascript

$(function(){
    $('#input').autocomplete({
        minLength : 0,
        source : 'myPhpSourceFile.php',
        select : function(event, ui){ 
            // this is where you would grab the value           
            var value = ui.item.value;
            // if you want to use the value for each item instead
            // you can store it in a hidden field
            $('#myhiddenfield').val(value);
            return false; // prevent an event interruption
        }
    });    

现在，对于您询问的上述特定示例，自动完成查看项目值的唯一时间是选择项目时。让它查看备用值的唯一方法是在收集结果集时如何在服务器端操作term。因此，再次回到php源文件，假设添加了一个名为special的列，然后可以执行以下操作：

$q = "SELECT id, first_name, last_name, special FROM Customer WHERE
CONCAT(first_name + ' ' + last_name + '('+special'+')') LIKE ?";

这个结果会给你想要搜索的查询类型，然后在结果集上设置results数组，如下所示：

$results[] = array(
   'label' => $row['first_name']." ".$row['last_name']."(".$row['special'].")",
   'value' => $row['id']
);

这将使您的结果集列表显示为spider man (ti)，正如您在上面询问的那样。我很确定我和你所问的是一样的，但如果不是，请多问一些问题，或者纠正我可能错的地方。我希望这能帮上忙！