jQuery自动完成-剥离标签以输入 [英] Jquery autocomplete - strip tags to enter into input

问题描述

我有下面的jquery自动完成代码，它们能很好地工作:

I have the following jquery autocomplete code which works perfectly:

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

我使用PHP格式化数据以自动显示图像，为了使用户获得更好的信息，PHP代码为:

I format the data using PHP to show an image in the automplete, for a better more informative UI for the user, the PHP code is:

$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>标记数据也推送到输入中.

The problem is that the JQuery autocomplete code is pushing the <img> tag data into the input as well.

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

Is there a way to format like this but have only the item title in the input box without the <img src=/....>?

推荐答案

您可以通过覆盖某些核心函数(主要是"parse")来扩展Autocomplete插件来实现这一目标.此函数的内部版本仅循环返回数据的每一行，并将其解析"为对象数组，每个对象包含以下属性: 数据–整个条目 值–默认显示值 结果–选择时用于填充输入元素的数据

You can achieve that by extending the Autocomplete plugin by overwriting certain core functions, mainly "parse". The internal version of this function simply loops over each line of the returned data and "parses" it into an array of objects, each containing the following attributes: data – the entire entry value – the default display value result – the data to populate the input element on selection

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

You can overwrite this by passing your own parse function as part of the options object to autocomplete.

您还需要提供一个"formatItem"功能，以便您格式化自动填充下拉列表中显示的数据！

you will also need to provide a "formatItem" function that will give you a chance to format the data shown in the autocomplete dropdown!

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调用中的要求删除图像，如下所示:

Then you can call and also provide a function that can remove the image as required by you in the .result call as follows:

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自动完成-剥离标签以输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！