Autocomplete jQuery com API local

Bom dia, fiz a formação Oracle One com vc's e adorei muito. Durante o curso tive aula de jQuery. E agora estudando para aprender mais desse framework, estou em algumas situações que não estou consigo avançar e preciso da ajuda de vc's.

Primeira situação:

Criei uma imput texte através do jQuery estou fazendo um autocomplete, consegui fazer funcionar colocando dados locais, como faço para mostrar os dados de uma API gerada como localhost. Não estou sabendo como trocar isso.

#<!-- Importado os arquivos do Jquery no código HTML
  -->
<link rel="stylesheet" 
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

#<!-- Criando no HTML um input que receberá o autocomplete -->
<input type="text" id="fruta" placeholder="Informe uma fruta"/>

#<!-- Meu código Jquery em um arquivo que chamei de fruta.js -->

   $(function() {
       var frutas = ["Ameixa", "Amora", "Banana", "Uva", "Maça"];
       $("#fruta" ).autocomplete({
           source: frutas
   });
});

Agora eu preciso trocar para que ele pegue informações dessa API criada.: http://localhost:5000/frutas

Segundo situação:

Tenho uma outra input, que está abaixo da primeira input, em que após eu escolher as frutas que eu quero e clicar no botão que criei chamado consultar. Ele tem que aparecer nessa segunda caixa, as frutas que selecionei. Quero colocar na frente dessas frutas, umas bolinhas verdes ou até mesmo aquela imagem de ticket para identificá-las.

Segue a segunda parteHTML

<input type="text" id="mostraFruta"/>
<button class="btn btn-primary btn-sm" id="submitButton" type="submit">Consultar</button>

Segue minha tela para melhor visualização.