0
  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 とタイトルは完全にプルされていますが、HTML もドラッグされています。

この場合、HTML が文字通り文字列ではなく div になることはありますか?

どんな助けでも大歓迎です:)

4

1 に答える 1

1

このコードを使用しますが、注意すべき点が 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());
  });
});

これが更新されたコードペンですhttp://codepen.io/anon/pen/sjmeB

「seeVal」ボタンと CSS は、出力をテストするためのものです。

于 2013-09-17T11:46:52.800 に答える