Bom, uma das abordagens pode ser a seguinte:
$("form#busca #campo-busca").autocomplete({
minLength: 3,
source: 'autocomplete.php',
/**
* Sugestão de uma das possíveis soluções.
*/
select: function( event, ui ) {
/**
* Considerando que podemos acessar o valor assim: ui.item.value
*/
$("form#busca #campo-busca").val( ui.item.value );
// ou
$("form#busca #campo-busca").html( ui.item.value );
return false;
},
html: true
});
NOTA: interessante analizar a possibilidade de usar os recursos de forma a reutilização. Desta forma pense em criar o componente dentro de um plugin [Jonathan Chaffer, Karl Swedberg - 2013, ___ 8 - Developing Plugins, 234 p.] e usando como um $.widget(){}.
o arquivo do plugin: app-seu-plugin.js
/*@!
* @auth: Paulo Sérgio da Silva
* @email: [email protected]
* @plugin: app-seu-plugin.js
* @description: O objetivo de centralizar as funções genéricas para o
* carregamento e apresentação do autocompletar em ????????.
*
* Autocompletar Categoria v1.0.0 (http://www.??????/)
* Copyright 2011-2015 ????, Pub.
* Licensed under MIT ()
*/
if (typeof jQuery === 'undefined') {
throw new Error('Component Type Fields\'s JavaScript requires jQuery')
}
/**
* Criando o plugin
*/
(function($){
var SeuPlugin = function(){
this.alertTestPlugin = function(){
console.log("alertTestPlugin: Testando o plugin jQuery!");
alert("alertTestPlugin: Testando o plugin jQuery!");
return false;
};
this.createWidget = function() {
/** Criando do widget */
$.widget( "custom.seuComponenteAutocompletar", $.ui.autocomplete, {
_create: function() {
//Implementar o comportamento de seu interesse
},
_renderMenu: function( ul, items ) {
//Implementar a aparência de seu meu
}
});
}
};
$.SeuPlugin = new SeuPlugin();
$.SeuPlugin.prototype = SeuPlugin;
})(jQuery);
/**
*
*/
$.SeuPlugin.createWidget();
Carregar o seu plugin:
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Carregar o seu plugin -->
<script src="../plugins/PATH_PARA_SEU_PLUGIN/app-seu-plugin.js"></script>
Usando seu componente:
$("form#busca #campo-busca").seuComponenteAutocompletar({
delay: 0,
minLength: 3,
source: 'autocomplete.php',
html: true
});
Referência:
[Jonathan Chaffer, Karl Swedberg - 2013], Copyright © 2013 Packt Publishing, Learning jQuery Fourth Edition: Better interaction, design, and web development with simple JavaScript techniques. Disponível em: < https://www.packtpub.com/web-development/learning-jquery-fourth-edition >. Acesso em: 25 Nov, 2017.
[jqueryui], Autocomplete #categories: jQuery User interface - Autocomplete. Disponível em: < https://jqueryui.com/autocomplete/#categories >. Acesso em: 25 Nov, 2017.