Question

我有以下jquery自动完成代码，它完美无缺：

$("#autoc1").autocomplete("/autoc2.php?arg=1&category=<? echo $category_id; ?>", {
width: 400,
matchContains: true,
minChars: 3,
selectFirst: false
});

我使用PHP格式化数据以在自动完成中显示图像，为用户提供更好的信息用户界面，PHP代码为：

$query = "SELECT $title, imageURL FROM PRprodINFO2 WHERE ((prodcatID = '$cat_id') 
          AND ($title LIKE \"%" . $_GET["q"] . "%\")) group by $title LIMIT 8"; }

$result = mysql_query($query);

$output_items = array();

while($row = mysql_fetch_array($result))    { 

$row[$title] = preg_replace('/[^\w\s].*$/', "", $row[$title]);

$row[$title] = trim($row[$title]);

$output_items[$row['title']] = $row['imageURL'];

} // while

$output_items = array_unique($output_items);

$output = '';

foreach ($output_items as $title => $image) {

$output .= '<img src='.$image.' style=max-width:50px;>'.$title."\n";

}

echo $output;

问题是JQuery自动完成代码也将<img>标记数据推送到输入中。

有没有办法像这样格式化，但只有输入框中没有<img src=/....>的项目标题？

Answer 1

试试这个：

$img = $('img');
$img.replaceWith($img.html());

请在此处阅读Jquery remove form tag, not content

Answer 2

你可以通过覆盖某些核心功能扩展自动完成插件来实现这一点，主要是“解析”。该函数的内部版本只是循环遍历返回数据的每一行，并将其“解析”为一个对象数组，每个对象包含以下属性：数据 - 整个条目 value - 默认显示值 result - 在选择

上填充输入元素的数据

您可以通过将自己的解析函数作为选项对象的一部分传递给自动完成来覆盖它。

您还需要提供一个“formatItem”函数，让您有机会格式化自动完成下拉列表中显示的数据！

var acOptions = {
    minChars: 3,
    max: 100,
    dataType: 'json', // this parameter is currently unused
    extraParams: {
        format: 'json' // pass the required context to the Zend Controller
    },
        parse: function(data) {
        var parsed = [];
        data = data.users;

        for (var i = 0; i < data.length; i++) {
            parsed[parsed.length] = {
                data: data[i],
                value: data[i].displayName,
                result: data[i].displayName
            };
        }

        return parsed;
    },
    formatItem: function(item) {
         return item.displayName + ' (' + item.mail + ')';
    }
};

然后您可以调用并提供一个函数，可以根据您的要求删除.result调用中的图像，如下所示：

jQuery(document).ready(function($) {
    $('#user_id')
        .autocomplete('/path/to/ajax/data/source', acOptions)
        .attr('name', 'display_name')
        .after('<input type="hidden" name="user_id" id="ac_result">')
        .result(function(e, data) {
            $('#ac_result').val(data.uid); // remove the img here for your text field!
        });
});

希望这有帮助！

Jquery自动完成 - 剥离标签以输入输入

2 个答案: