Estou tendo muitos problemas para fazer o widget de preenchimento automático do jQuery funcionar para mim. Estou usando uma lista de pares de chave / valor de um servidor.

Eu tenho os seguintes requisitos:

Se o usuário selecionar um valor no widget, desejo passar o ID para o servidor.

Se o usuário não selecionar um valor e inserir texto não processado, ou modificar um valor que já foi selecionado, desejo que o campo ID seja limpo e que apenas o texto não processado seja enviado ao servidor.

Assuma issosomeAjaxFunction retorna uma matriz de objetos que o widget de preenchimento automático espera:{label:label, value:key}.

Inicialmente, configurei o widget de preenchimento automático da seguinte forma:

$(input).autocomplete({
    source: sourceFunction,
    minLength: 1
});

Alterar a seleção, mesmo passando o mouse sobre um dos itens, altera o texto na caixa de texto referenciada por $ (entrada) para a chave subjacente, em vez do rótulo. Isso é altamente indesejável do ponto de vista da interação com o usuário - na verdade, a própria razão pela qual estou investigando isso é porque os usuários do site que estou construindo estavam constantemente confusos, com o texto digitado, aparentemente se transformando em números aleatórios!

Adicionei um campo oculto sob a caixa de texto e implementei os eventos select () e focus () para ocultar o ID da seguinte maneira:

$(input).autocomplete({
    source: sourceFunction,
    minLength: 1
    focus: function(event, ui) {
        $(idField).val(ui.item.value);
        $(this).val(ui.item.label);
        return false;
    },
    select: function(event, ui) {
        $(idField).val(ui.item.value);
        $(this).val(ui.item.label);
        return false;
    },
    minLength: 1
});

Isso funciona bem quando o usuário adere ao script fornecido pelo menu suspenso de preenchimento automático. O ID está oculto e enviado corretamente ao servidor. Infelizmente, se o usuário desejar inserir algum texto de forma livre na caixa e pesquisar com base nesse valor, o campo ID não será redefinido e o ID selecionado anteriormente será enviado ao servidor. Isso também é bastante confuso.

A documentação do preenchimento automático da interface do usuário do jQuery lista umchange evento e afirma que oitem propriedade doui argumento será definido para o item selecionado. Imaginei que poderia redefinir o campo de ID oculto em uma tecla pressionada e preencher novamente o ID se o preenchimento automático for alterado. Infelizmente, além do evento de pressionamento de tecla, capturar um monte de pressionamentos de tecla quenão deveria redefinir o ID, oreturn false declaração acimaselect O evento necessário para gerenciar o texto na caixa de texto impede que ochange evento de ter ui.item atribuído corretamente.

Então agora eu estou preso - eu realmente não sei mais o que posso tentar fazer com que o widget suporte a funcionalidade que parece que ele deve suportar por padrão. Ou esse processo é muito mais complicado do que deveria ser, ou estou perdendo algo realmente óbvio. Eu escolhi todos os eventos disponíveis e todos os exemplos e vim de mãos vazias. De fato, mesmo o exemplo "Dados e exibição personalizados" na página da interface do usuário do jQuery sofre com esse problema.

Posso adicionar alguns hacks no lado do servidor para cobrir isso, mas eu realmente preferiria fazer isso no nível do cliente.

Eu também preferiria manter o widget de preenchimento automático da UI do jQuery, em vez de mudar para outro.