Newform.aspxのカスタマイズでオートコンプリートを使用する

Question

JqueryでオートコンプリートオプションをSharePoint 2013で使用しようとしています。

私は新しいform.aspxをカスタマイズしています以下のコード

 var autocomplete = $("input[title='Skill Required Field']").autocomplete({ 
minLength: 3, 
source: function(request, response) { 
$.ajax({ 
beforeSend: function (request) 
{ 
request.setRequestHeader("Accept", "application/json;odata=verbose;charset=utf-8"); 
}, 
url: site url, 
dataType: "json", 
success: function(data) { 
$.each(data.d.results , function (i, result) { 
if(result.Title){ 
titles.push(result.Title) 
}        
}); 
response(titles); 
}, 
error: function(data) { 
alert('search error'); 
} 
}); 
}, 
// Run this when the item is in focused (not selected) 
    focus: function(event, ui) { 
    return false; 
    }, 
// Run this when the item is selected 
    select: function(event, ui) { 
     location.href = ui.item.fields.Path; 
    }, 
appendTo: $('#menu-container') 
}).data("uiAutocomplete")._renderItem = function(ul, item) { 
return $("<li>").append('<div>' + item.label + '</div>').appendTo(ul); 
}; 

function getFields(results) { 
r = {}; 
for(var i = 0; i< results.length; i++) { 
if(results[i] != undefined && results[i].Key != undefined) { 
r[results[i].Key] = results[i].Value; 
       } 
      } 
      return r; 
     } 

を試してみました。

"<div id='menu-container' class = 'col-xs-3'>{{SkillCtrl}}</div>", 

formTable = formTable.replace("{{SkillCtrl}}", getSPFieldRender(ctx, "MySkill")); 

列がテキストの単一ラインとして作成されます。私はスキルのデータは以下のように定義されているJSLinkを追加しました。私はjquery-ui-1.12.1、jquery-1.11.3.minを使用しています。 現在、エラーは発生していませんが、結果はメニューコンテナボックスに表示されません。 F12を使用すると、「結果。タイトル」にデータが表示されます。ただし、UIに表示されるデータはありません。私は何が欠けていますか？あなたrenderItemsは、あなたがそれらを正しくラップしなければならないとき、また

success: function(data) { 
    var titles = []; 
    $.each(data.d.results, function(i, result) { 
    if (result.Title) { 
     titles.push(result.Title); 
    } 
    }); 
    response(titles); 
} 

：<li><div></div></li>を？この問題を解決する方法のおかげ

Answer 1

は、私は、次のsuccessのコードをしようとするだろう。私は助言します：

return $("<li>").append('<div><img style="margin-right:3px;top:3px;" src="/_layouts/15/images/' + img + '">' + item.label + '</div>').appendTo(ul);