Jquery ui 在Newform.aspx自定义中使用自动完成

我正在尝试在SharePoint 2013的Jquery中使用自动完成选项

我已经尝试了下面的代码

     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;
        }

我正在定制新的form.aspx。我添加了一个JSLink，其中技能的数据定义如下：

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

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

该列被创建为单行文本。我正在使用jquery-ui-1.12.1、jquery-1.11.3.min。 目前我没有收到任何错误，但结果不会显示在菜单容器框中。使用F12时，我可以在result.Title中看到数据。但是，UI中没有显示任何数据。我错过了什么？如何修复此问题？谢谢

我将尝试以下成功代码：

此外，在渲染时，必须正确包装它们：。我建议：

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

---

结果需要返回到响应，我在您的示例中没有看到这一点。我也不知道你的示例代码中有什么地方。谢谢你的回复。我纠正了那些。但数据仍然没有显示在UI中。我尝试了一个项目，return li语句被命中3次，但没有数据反映回Ui中。我已使用所做的更改更新了现有代码made@venkat14我会在成功回调中添加console.logdata，然后检查从AJAX调用中返回的数据是否符合预期。您是否也可以编辑您的帖子，并提供一个数据示例？

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