JQuery UI Autocomplete：如何在插入输入字段之前从标签中剥离标签？答案

【问题标题】：JQuery UI Autocomplete: how to strip tags from label before inserting into the input field?JQuery UI Autocomplete：如何在插入输入字段之前从标签中剥离标签？
【发布时间】：2011-09-26 15:07:10
【问题描述】：

我正在使用 JQuery UI 自动完成，我有一组通过 ajax 返回的项目，其中包含搜索引擎突出显示的术语（因此标签已经包含 html）。问题是每次我选择一个项目时，带有 html 标记的值都会插入到文本框中，这当然不好。我想知道在插入文本框之前是否可以从标签中删除所有标签

        var cache = {}, lastXhr;
        $('#location_name').autocomplete({
        source: function( request, response ) {                 

            var q = request.term;
            if ( q in cache ) {
                response( cache[ q ] );
                return;
            }

            lastXhr = $.getJSON( "location_search/", {q: q}, function( data, status, xhr ) {
                $.each(data, function(i, v){
                    data[i].label = v.name + (v.address !== null ? ', ' + v.address : '');
                });

                cache[ q ] = data;

                if ( xhr === lastXhr ) {                                        
                    response( cache [q] );
                }
            });
        },      
        select: function( event, ui ) {
            $('#location_id').val(ui.item.id);
            $('#selected_location').html(ui.item.label);                        
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>"+ item.label + "</a>" ) //  + + "<br>" + item.desc + "</a>"
        .appendTo( ul );
    };

【问题讨论】：

标签： jquery html autocomplete

【解决方案1】：

添加此功能：

function stripHTML(oldString) {
  return oldString.replace(/<&#91;^>&#93;*>/g, "");
}

并添加到您的代码中：

$('#location_name').change(function(){
    $(this).val(stripHTML($(this).val());
});

【讨论】：

谢谢 Tak，stripHTML 函数会派上用场，但问题不在于 $('#selected_location')，我应该从我的代码中删除它。问题在于 $('#location_name') 的值，一旦选择下拉列表的值，它就会自动设置
抱歉，我已经更新了答案。希望新功能可以修复它，否则我有另一个想法。让我知道:)
感谢 Tak，这个想法很棒，我可以看到它应该可以工作，但不幸的是它没有。我认为问题在于它在经过更多的试验和错误之后，我找到了解决方案：（似乎无法弄清楚如何在评论中发布漂亮的代码）。再次感谢您的帮助function stripHTML(oldString) { return oldString.replace(/(<([^>]+)>)/ig,""); } $('#location_name').bind('autocompleteclose', function(){ $(this).val(stripHTML($(this).val())); });
太好了，很高兴你把它修好了！ :)

【解决方案2】：

为了完成这项工作，您还应该传递 item.value

在选择时，它首先查找 item.value，然后查找 item.label

这样你就可以留下你的选择：就像那样

select: function( event, ui ) {
        $('#selected_location').html(ui.item.label);                        
    }

【讨论】：