Question

我有一个目前正在浏览项目标题的数组
然后将此数组用作jQuery UI自动完成的源。
在输入HTML输入时，自动填充功能会从数组中找到标题列表
我想向我们提供点击搜索时附加到网址的项目的ID（其当前配置为推送标题，因为它是数组中的内容

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

我目前遇到的困难是，如果我尝试将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和标题完全可以通过，但HTML也会被拖出。

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

非常感谢任何帮助：）

Answer 1

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

在autoComplete中，您应为每个建议添加<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用于测试输出

你如何将HTML推入数组？

1 个答案: