如何将 HTML 推送到数组中？

Question

1. 我有一个数组，它当前正在拉动项目的标题
2. 这个数组随后被用作 jQuery UI 的自动完成源。
3. 在 HTML 输入中键入内容时，自动完成功能会从数组中查找标题列表
4. 我想在单击搜索时向我们提供要附加到 URL 的项目 ID（它当前配置为推送标题，因为那是数组中的内容

将 ID 推入数组时，标题和 ID 自然会显示在自动完成下拉列表中。但是，我不希望显示 ID，我只是根据标题提取它的内容，以便将其附加到 url。

我目前遇到的困难是，如果我尝试创建一个 HTML 结构作为变量以推入一个数组，则在键入时 HTML 会显示在 HTML 输入框中。

例如：

var prodResultTite = $(this).attr('ows_Title');
                        var prodResultID = $(this).attr('ows_ID');
                        var prodResultContainer = '<div class="result" id="' + prodID + '">' + prodTitle + '</div>';

                        //itemTitle.push($(this).attr('ows_Title'));
                        itemTitle.push(prodResultContainer);

这导致输入字段显示：

'<div class="result" id="' + 125+ '">' + My Product Title + '</div>';

如您所见，ID 和 Title 被完美地拉过去了，但是 HTML 也被拖了过去。

在这种情况下，HTML 是否真的是一个 div 而不是一个字符串？

任何帮助将不胜感激:)

Answer 1

使用此代码，但只需要注意一点。

在自动完成中，您应该为每个建议添加一个<a></a> 标签，否则您将无法将鼠标悬停在项目上或选择项目。因为它是通过点击<a></a> 标签触发的。

HTML

<input id="search" type="text"/>

<div id="itemcontainer" style="display:none">
  <div class="item" id="id_1" title="Item 1">Item1</div>
  <div class="item" id="id_2" title="Item 2">Item2</div>
  <div class="item" id="id_3" title="Item 3">Item3</div>
  <div class="item" id="id_4" title="Item 4">Item4</div>
</div>

<input type="button" id="seeVal" value=" see autocompele html" />

CSS

.result , .result *{
  color:#f00 !important;
}
.result#id_2 ,.result#id_2 *{
  color:#00f !important;
}

JS

$(document).ready(function(){
  /*var items = [
  {
    id:1,label:'lbl1'
  },
  {
    id:2,label:'lbl2'
  },
  {
    id:4,label:'the label3'
  },
  {
    id:5,label:'the label4'
  },
];*/

var items=[];

$('#itemcontainer').find('.item').each(function(){
  items[items.length]={'id':$(this).attr('id'),'label':$(this).html()}
});

$('#search').autocomplete({  
  minLength: 0,
  source:items,
  focus: function( event, ui ) {
    $('#search').val( ui.item.label );
    return false;
  },
  select: function( event, ui ) {
    $('#search').val( ui.item.label );

    return false;
  }
}).data( "ui-autocomplete" )._renderItem = (function( ul, item ) {
  var $div=$('<div></div>').addClass('result').attr('id',item.id).html('<a>'+item.label+'</a>');
return $( "<li>" )
.append($div)
.appendTo(ul);
});

  $('#seeVal').on('click',function(){
    alert($('.result').parent().parent().html());
  });
});

这里是更新的codepen http://codepen.io/anon/pen/sjmeB

“seeVal”按钮和 CSS 用于测试输出