Utilisation de la saisie semi-automatique dans la personnalisation Newform.aspx

Question

J'essaie d'utiliser l'option de fin automatique dans Jquery avec SharePoint 2013.

J'ai essayé le code ci-dessous

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

Je PERSONNALISATION le nouveau form.aspx. J'ai ajouté un JSLink, dans lequel les données relatives à la compétence est définie comme suit:

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

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

La colonne est créée comme une seule ligne de texte. J'utilise jquery-ui-1.12.1, jquery-1.11.3.min. Actuellement, je ne reçois aucune erreur, mais les résultats n'apparaissent pas dans la boîte du conteneur de menu. En utilisant F12, je peux voir les données dans "result.Title". Cependant, aucune donnée n'est affichée dans l'interface utilisateur. Qu'est-ce que je rate? Comment résoudre ce problème Merci

Answer 1

Je voudrais essayer le code success suivant:

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

Aussi, lorsque vous renderItems, vous devez les envelopper correctement: <li><div></div></li>. Je voudrais conseiller:

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