Crie formulários web dinâmicos com jQuery | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Crie formulários web dinâmicos com jQuery

teacher avatar Laurence Svekis, Best Selling Course Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

9 aulas (59 min)
    • 1. Formas de promoção

      1:28
    • 2. Introdução ao curso de jQuery e formulários

      3:28
    • 3. Plano de lição CSS HTML

      5:08
    • 4. Correspondência de conteúdo para Keyup jQuery no campo de formulário

      8:49
    • 5. Formulário Selecione valor de retorno na mudança

      5:35
    • 6. Resposta de AJAX de evento jQuery do servidor

      9:09
    • 7. Botões de jQuery e rádio e caixas de seleção

      10:43
    • 8. Configuração de autocompletar da interface do usuário do jQuery

      7:14
    • 9. Autocompletar da IU do jQuery a partir do arquivo JSON dinâmico

      7:20
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

154

Estudantes

--

Sobre este curso

Crie Formulários web dinâmicos com o jQueryGuide para acessar conteúdo de formulário e utilizar os dados do jQuery e do
código JavaScript. O
jQuery fornece ótimas funcionalidades e efeitos dinâmicos nas suas páginas da Web.

Juntamente com formulários HTML, o jQuery pode fazer tanto.

Este curso vai cobrir como combinar dois campos de formulário para verificar se o conteúdo é o mesmo que é um snippet de código útil para ajudar a fornecer verificação de conteúdo de formulário.

Use caixas de seleção para acionar eventos como janelas TOS e mais. A interação com caixa de seleção em um formulário é uma funcionalidade muito necessária.

Aprenda a fazer chamadas AJAX para o servidor com valores suspensos, caixas de seleção e botões de rádio que ativam eventos. A interação de formulário dinâmico permite que você forneça a cada usuário uma experiência de formulário mais personalizada.

Adicione a interface do usuário do jQuery automaticamente e preenche o auto completo com dados JSON dinâmicos. A interface do JQuery tem muitos recursos pré-construídos que são fáceis de adicionar aos seus projetos da web.

No final do curso, você vai ter as habilidades e saber como aplicar jQuery no seu site.

Estou aqui para ajudar você a aprender a criar seus próprios sites e pronto para responder a quaisquer perguntas que você possa ter.

JavaScript e jQuery estão em habilidades de demanda, e aprender a usá-las vai ajudar a separá-lo da multidão.

Quer saber mais, o que você está esperando dar o primeiro passo. Junte-se agora para começar a aprender como você também pode utilizar o jQuery no seu site hoje.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Formas de promoção: Jake é uma ótima maneira de Adam Mayes e funcionalidade e efeitos dinâmicos. Ponting páginas Web Bakery fornece grande funcionalidade quando se trata de formulários e criação formulários é habilidades essenciais com desenvolvimento Web juntamente com cada equipe Reformas padaria em fazer tanto um dos trechos de código úteis dentro deste curso, Vamos cobrir como fazer ah, formulário de verificação de campo. Certifique-se de que o conteúdo é o mesmo. Além disso, usaremos caixas de seleção como gatilhos, e elas serão úteis para quando você estiver construindo sua forma. Para criar essa interação, aprenda a fazer chamadas de jocks para o servidor com valores suspensos. Botões de opção de caixas de seleção Para acionar eventos dentro de sua Web. Instrução de formulário dinâmico permite que você forneça a cada usuário uma experiência de formulário personalizado , em seguida, adicionar segredo que você I para completar automaticamente em preencher auto, completo com dados dinâmicos Jason. J. Curry tem muitas capacidades pré-construídas que são fáceis de adicionar aos seus projetos Web e adicionar tanta funcionalidade até então, é claro, você terá as habilidades e saber como aplicar J coury dentro de seus sites. Estou aqui para ajudá-lo a aprender a criar sites e pronto para responder a quaisquer perguntas que você possa ter. JavaScript e J coury estão em habilidades de demanda e aprender como usá-los ajudará a separá-lo da multidão. Quer saber mais? O que você está esperando? Dê o primeiro passo. Juntou-se agora e comece a aprender como você também pode utilizar uma consulta dentro de seus projetos web hoje mesmo. 2. Introdução ao curso de jQuery e formulários: Bem-vindo ao J. Curry e trabalhando com o curso Form Fields. E dentro deste curso, eu vou estar mostrando a vocês como fazer algumas coisas realmente incríveis quando se trata de formas e Jake cansado e toda essa interação incrível que você pode criar com Shakeri. Meu nome é Lawrence, e eu sou um desenvolvedor web por mais de 15 anos. E uma das coisas que eu sempre gostei de trabalhar com seu Jake se preocupa realmente me surpreende quantas coisas maravilhosas você pode fazer com G Query. Então, uma das coisas que mostrarão neste curso é como criar um campo de correspondência de senha. Então eu notei que até os dois campos coincidirem, então nós temos isso combinado aqui e então o vermelho vai embora. Nós também vamos estar olhando para como trabalhar com caixas de seleção. Então vemos que mudamos o rádio também. Sim, mudança de rádio para saber que temos ah prompt aqui. Então, sempre que nós marcamos isso fora e há um monte de cenários diferentes para usar este tipo fora código-fonte e, claro, o código-fonte está tudo incluído também. E então eu posso ocultar e mostrar certas partes do meu código HTML. E a coisa interessante sobre isso é que nós estamos realmente fazendo um homem Ajax chamar para o servidor e então esta é a resposta voltando do servidor. Então, esta é outra coisa que vamos mostrar a vocês dentro do curso é como enviar alguns dados para um servidor via Ajax. Observe que não temos nenhuma atualização de página deles e recebeu os dados de volta e saída dentro do nosso código HTML e, em seguida, para terminar, vamos estar olhando para G criar você. Eu tem este componente realmente incrível onde podemos fazer um auto completo e nós vamos trazer isso até um ponto onde nós também vamos ser não apenas auto-completar, mas nós vamos estar carregando uma lista aleatória de nomes de um usuário aleatório P I ponto Emmy. E como vemos aqui, os nomes estão sempre mudando. E isso foi apenas uma maneira de demonstrar que podemos usar um arquivo fonte formatado Jason para dados R A p I e vemos que esses são os dados que estão sendo retornados daquele site e temos um monte de dados realmente interessantes que são retornados Aqui atrás. E, claro, podemos usar Thies para apropriadamente e pré Phil nomes e informações em nossa lista. Então você vê aqui como nós digitamos em que consulta G está pegando que temos essas interações foram acionadas e estamos enviando sobre nossa solicitação via Ajax para o arquivo Jason, puxando isso de volta e configurando aqueles como objetos, objetos utilizáveis preenchendo em uma taxa e, em seguida, completando a nossa auto coat seção completa onde temos isso descartado e o usuário pode simplesmente começar a digitar um nome e obter um monte de opções para possíveis nomes. Então, é claro, precisamos que os nomes que correspondam lá dentro, e então eles poderiam simplesmente selecionar e preencher o campo com esses nomes descartados. Então tudo isso, e muito mais, todo o código-fonte está incluído neste curso. Então você está pronto para começar a fazer algum código realmente incrível com sua consulta G e seus formulários. Então vamos começar 3. Plano de lição CSS HTML: nas próximas lições resolver, vamos estar trabalhando com formulários formulários HTML e interagindo com esses formulários e que conteúdo dentro dos formulários usando consulta J. É por aqui. Eu tenho alguns campos básicos aqui, então apenas alguns campos regulares. Eso O que vamos fazer é usar Jake Worry para fazer uma comparação do conteúdo que é colocado dentro de um campo para o outro. Também vamos acessar o conteúdo do Ajax. Sempre que houver alguma alteração nos botões de rádio. Nós também vamos estar olhando para caixas de seleção e como eles funcionam e se encaixam com Jay Query e também seleções suspensas. E então temos um botão aqui que podemos clicar. Isto é apenas um hiperlink. E então eu tenho outro campo aqui que diz nome. Então, o que eu quero fazer com este é que eu quero realmente colocar em auto completo, e para isso nós vamos estar usando J cree você I porque eles têm um componente auto completo para que basicamente, você pode fazer um drop down e ele dá a você uma opção de seleção aqui fora o quê? As opções possíveis são então nós vamos estar puxando em algum conteúdo usando Ajax e Jason Data puxando isso para este campo de formulário para o auto completo, para ser capaz de ter, algum conteúdo para preencher. Então nós vamos estar fazendo um monte de diferentes ações de campo de formulário em relação à consulta J e como trabalhar com os campos estrangeiros. Então também vamos usar o chrome como nosso navegador e colchetes como nosso editor. E, claro, você pode selecionar seu próprio editor favorito. E eu vou correr rapidamente através do código HTML CSS que eu tenho configurado aqui e, em seguida , na próxima lição, ou começar um salto direto para trabalhar com este código feito e trabalhar com Jake Worry. Então aqui, eu só tenho alguns CSS básico. Então eu fiz algum espaçamento em torno do dibs. Eu criei uma aula aqui chamada One, então essencialmente para que eu possa ter o meu link mais parecido com um botão. Eu tenho uma área de saída, então eu vou estar usando isso se eu precisar produzir qualquer conteúdo. Eu tenho dois campos de entrada de texto diferentes aqui, e eu vou estar fazendo uma comparação entre o conteúdo desses dois campos, então p S W a p s w b. Então talvez se estes fossem campos de senha, queremos ter certeza de que o usuário está digitando uma senha. E fazemos uma comparação rápida apenas para garantir que a senha seja preenchida da mesma forma que está no campo acima. Então ambos os campos essencialmente tendo o mesmo. Eu tenho outro aqui em I D para status. Então, se tivermos que retornar algum status porque teremos muita comunicação indo e voltando. Por isso, precisamos de algum espaço aqui dentro da nossa página Web para a saída de todas essas informações. Então talvez eu poderia até atualizar isso e provavelmente melhor servi-lo como um div porque eu apliquei esse espaçamento em torno dos mergulhos. Então ele vai apresentar um pouco melhor dentro da página da Web e, em seguida, abaixo dela. Aqui. Eu tenho um formulário, então eu não tenho meu formulário de abertura. Eu não tenho meu formulário de encerramento, mas eu tenho um monte de elementos de formulário aqui. Então eu tenho meus botões de rádio e eu tenho um valor de sim valor de não e basicamente eram por padrão. Estamos começando com nenhum marcado tem caixas de seleção aqui. Então algo onde talvez enviemos alguns dados quando forem verificados. E também talvez possamos ocultar ou mostrar a saída de uma nota put def sempre que for verificado. Então, essas são algumas demonstrações diferentes de funcionalidade que você pode trabalhar com caixas de seleção que podem ser úteis quando você está desenvolvendo formulários e, em seguida, é claro, drop downs. Então, sempre que qualquer coisa é selecionado aqui a partir do menu suspenso, queremos iniciar algum tipo de ação, porque estamos realmente procurando essa interação do usuário e fornecendo uma resposta de volta usando J query e, em seguida, em seguida, a seguir aqui, eu apenas obtive esse botão de clique. Então, essa habilidade mais grosseira para você adicionar um ouvinte de eventos ou ter uma ação de clique e acionar algo para acontecer dentro da nossa página web. E, finalmente, tenho outro campo de texto aqui, e acabei de colocar o nome do titular da polícia aqui. E este campo que provavelmente vamos usar para fazer o menu suspenso para o J Crew au I s O também dentro do código aqui. Então eu estou ligando para a consulta J Cdn. Então esta é uma biblioteca do Google J. Corey. Então, podemos acessar isso e fazer uso dele dentro do nosso JavaScript. E então, finalmente, chegamos às tags de script aqui, e temos nossa função pronta para o documento pronto para uso. Então, sempre que as cargas de documento estavam prontas para carregar e começar a trabalhar com uma consulta e isso é um resumo do código HTML e, claro, isso é apenas para fins de demonstração. E isso foi o que foi configurado todo esse código html, a fim de criar essa interação com Jake preocupado. Então, a próxima lição. Vamos saltar para ele e começar a trabalhar com RJ Query. 4. Correspondência de conteúdo para Keyup jQuery no campo de formulário: nesta lição. Vamos ver como podemos combinar esses dois campos de senha. Então, em última análise, queremos que o usuário seja capaz de entrar, digitar uma senha e, em seguida, digitar a senha novamente. E queremos fazer um cheque para ter certeza de que combinam. E então talvez algum tipo de saída aqui dentro do status para dizer que ele está correspondendo ou não corresponde. Então vamos em frente e chegar ao código R. J Craig. Então vamos fazer isso na página aqui. E a primeira coisa que, claro que devemos fazer é fazer ah hook up e em um ouvinte evento para key up. Então eu vou apenas olhar para que eu d que nós configuramos em, que é a senha B. E nós não precisamos de um ouvinte para a senha A. Para o primeiro campo só porque nós vamos estar fazendo uma comparação. Então vamos assumir que há algum conteúdo lá dentro e que os usuários já preencheram sua primeira versão da senha e que estamos apenas fazendo uma verificação chamaria de validar. E sempre que a chave para cima é acionada que nós vamos executar nossa função e as funções que vão chamado validar. Eles não estavam passando nenhum argumento. E talvez apenas para demonstrar que as coisas estão funcionando, vamos emitir algum texto nesse status para o status que eu d e vamos inserir algum texto lá. Então eu tenho que fechar essa citação e talvez eu só colocar trabalho por agora. E depois vamos, claro que vamos actualizar isto. Então, a idéia aqui é que uma vez que eu começar a digitar no campo PS WB, que é logo aqui o 2º 1 do que deve o status que deve mudar para trabalhar. Vamos nos certificar de que isso funciona. Então aqui estão os nossos dois campos. Então, no 1º 1, podemos pegar o que você quiser, porque não está ligado. Mas assim que eu começar a digitar aqui, nós vemos que o status aparece está funcionando. Então, isso é, de fato, trabalhar. E podemos continuar construindo nosso código aqui. Então o que eu quero fazer é que eu quero realmente puxar esses valores como variáveis agora, claro, nós não precisamos necessariamente fazer isso porque nós poderíamos fazer nossa comparação em ambos os valores de campo. Mas, a fim de torná-lo mais legível, vamos apenas fazê-lo desta forma onde estamos puxando esse valor fora de P s um W ou P S W puxando esse valor e usando a variável p S W um para conter esse valor. Então, no próximo, vamos para a mesma coisa para o próximo campo. Então isso foi P S W B. Então use P S W é um formulário abreviado para senha e a e A B para diferenciar os dois campos. Então agora temos os dois valores em puxado para RJ Query. E agora vamos apenas fazer nossa comparação porque estamos disparando essa função toda vez que essa chave é verificada. Então, o que queremos fazer é disparar continuamente, fazer as condições, fazer as verificações e ver se esses campos atualizados estão combinando. Então vamos igualar. Vamos verificar se P S W um é igual a P S W dois. Nós também vamos fazer isso pelo tipo a swell e é claro que não é 100% necessário, mas é sempre uma boa prática certificar-se de que estamos validando o tipo porque queremos que eles sejam uma combinação completa. Então, se é válido, se está funcionando, então eu tenho que mudar trabalhando muito combinado ou algo assim. E então, é claro, precisamos de uma nova alternativa aqui para que, se PS um não for igual a PS dois, então queremos que o status não produza muito. Então vamos verificar isso e ver como isso funciona. Então vamos digitar em teste e, em seguida, não uma correspondência, não correspondência, e, em seguida, assume que nós coincidir com os dois campos que vemos correspondidos. Então isso pode ser algo onde talvez pudéssemos destacar e ler ou algo assim para você, uh, dizer ao usuário que ele assim para você, uh, uh, tem que continuar digitando. Então, é claro que poderíamos entrar e adicionar estilo em torno dele se ele não for compatível para que possamos fazer algo como e então, claro, nós vamos ter que alternar isso e remover isso uma vez que ele faz muito. Então talvez não o status. Mas talvez pudéssemos selecionar isso primeiro. Ou poderíamos realmente colocar uma aula lá também e destacar a classe e remover que tantos que vai ser o melhor escreveu para ir. Então, vou adicionar essa aula. Sim, eu ia chamar-lhe Campo de Jogo. Essencialmente, é para isso que vamos usá-lo quando estivermos combinando. E vamos fazer isso para o 2º 1 aqui. o método de alternar E vamos usaro método de alternarmais e talvez devêssemos fazer algo como destaques . Então eu realmente vou adicionar em outra classe aqui, e eu vou usar eu acredito que nós chamamos um campo de correspondência eso para destaque e pegar este aqui, Copiá-lo e aplicar algum tipo de estilo aqui para que possamos fazer algo como uma cor de fundo e você Lê? Então dê uma olhada e veremos o que acontece agora. Então, agora, até termos nosso jogo, vamos ver que ele fica vermelho, mas não estão, defato, fato, removendo-o. Então, o que estamos fazendo é quando alternamos, não estamos. Então não está funcionando perfeitamente com o botão de alternância. Então talvez o botão de alternância não seja o melhor, e nós deveríamos apenas manter a adição e remoção da classe, a fim de ter certeza de que estamos fazendo isso no momento certo. Então essa é a coisa com a alternância, porque estamos ativando e desativando. Então, às vezes, não é a melhor abordagem. Então talvez o que eu vou fazer é adicionar classe e então aqui uma vez foram combinados. Então nós removemos a classe e o que isso vai fazer é se essas classes lá, que irá removê-lo. E se não for, então vou adicioná-lo. Então agora vamos continuar a adicionar essa classe até que a igualemos. E assim que não tivermos uma correspondência, obtemos a cor realçada. E, claro, há um monte de coisas diferentes que você pode adicionar em um monte de funcionalidades diferentes. Mas, essencialmente, é importante lembrar desta lição que uma vez que acertamos o jogo, uma vez que temos a chave para cima, aqui está então esta é a primeira coisa que estamos olhando e sempre que há qualquer tipo de chave para cima ação dentro deste campo, então nós vamos acionar esta função para disparar fora e dentro da função. Nós apenas fazer uma verificação rápida aqui e esta função pode conter o que você deseja conter. e ele apenas executar através da funcionalidade usando J Query para corresponder com qual lógica queremos aplicar a esse campo. Temos algumas coisas realmente excitantes chegando. E, claro, com Jake Worry. Tudo é sempre muito interessante. E é simplesmente incrível quantos efeitos você pode criar com apenas um pouco de código na consulta J . Então eu vou estar mostrando a você mesmo coisas muito legais que você pode fazer com seus formulários quando se trata de J Query. E então também, vamos olhar para o Jaker você um pouco, então isso está chegando nas próximas lições de acordo. 5. Formulário Selecione valor de retorno na mudança: nesta lição. Vamos nos concentrar nas caixas de seleção e caiu. Então, se queremos que algo aconteça, sempre que estamos fazendo o menu suspenso e uma nova seleção é feita ou se a caixa de seleção está marcada e normalmente você pode querer ver se você tem ah website aqui e você quer que alguém concorde com os termos e condições, talvez você não queira que eles sejam capazes de continuar com o formulário até que eles concordem com ele ou se você quiser que eles leiam através de algo. Ou talvez você só queira ocultar parte do seu formulário depois que ele o tiver preenchido com uma caixa de seleção Talvez não seja relevante para eles um monte de opções diferentes e dentro desta lição. . Então vamos ver como podemos acionar isso como eventos e então, é claro, disparar algum tipo de JavaScript interativo real para ele ou Jake se preocupar com isso. Então vamos abrir nosso editor e começar a fazer essas conexões aqui. A primeira coisa que queremos fazer é querê-lo. Talvez se concentre na seleção, os elementos selecionados, e percebemos que temos duas opções aqui. Então talvez eu possa adicionar mais algumas opções só para torná-lo um pouco mais interessante. Isso ainda deve ser também. Eles são tão 13 este 14 e quatro e três e apenas realinhar aqueles embelezar aqueles s O que é mais legível, mais apresentável. Eso A primeira coisa que eu quero fazer é fazer minha seleção desses e notar que eu não tenho um i d aqui. Então, é claro que eu poderia adicionar uma identidade e eu poderia fazer a seleção lá. Mas eu acho que o que eu vou fazer é eu vou começar com o pai, o meu formulário, e eu vou selecionar o elemento select dentro do meu para Então apenas para tornar as coisas um pouco diferentes. Então, minha forma e seleção, é claro, eu preciso soletrar selecionar corretamente lá, e nós vamos ouvir uma mudança nele. E este é outro manipulador de eventos, JavaScript, que irá desencadear algo para acontecer uma vez que este evento é realmente selecionado dentro do nosso tribunal. Então talvez o que queremos fazer por agora é talvez o que vamos fazer, podemos trabalhar com esse conteúdo de saída aqui e talvez produzir algo dentro desse conteúdo. Então, sempre que for selecionado, vamos fazer na saída e vamos produzir algum texto e vamos fazer selecioná-lo. Então também foram um registro de console algo aqui. Então eu vou console, fazer logout algumas informações sobre a seleção, então nós vamos fazer o log do console e todo o objeto. Então salve isso e vá para um navegador e veremos o que acontece agora. Então, sempre que fazemos nossa seleção e devemos inspecionar nosso elemento, basta abrir isso em nosso cônsul e ver o que está acontecendo aqui. Não está disparando, então vamos dar uma olhada no nosso código e descobrir melhor. Por quê? Isto não está a disparar. E se notarmos aqui que esqueci aquele haxixe, então vamos tentar de novo e ver o que está acontecendo. Então, quando faço as alterações, vemos que fomos selecionados e temos as informações que selecionamos lá. Então selecione. Temos todas as opções diferentes e assim por diante. Então o que ele está fazendo é que ele está devolvendo toda a seleção então não importa qual deles nós selecionamos estava retornando que seu pneu selecionou parte de conteúdo o que precisamos fazer é selecionar o valor selecionado. Então, apenas para v A. L para retornar o valor, vamos ver o que aparece agora. Tão refrescante. Vemos que obtemos o valor selecionado. E, claro, poderíamos até ter colocado isso dentro de nossa seleção lá apenas para completar o loop. Então, pegue esse valor e ou talvez nós apenas adicionemos esse para selecioná-lo para que saibamos que o que selecionamos e, claro, isso agora mudará. Toda vez que faço uma seleção vejo selecionada e o valor selecionado, digamos que você trabalhe com a lista suspensa, a seleção suspensa. E assim como o exemplo anterior, uma vez que desencadeamos esse evento, o que quer que façamos aqui dentro, isso depende de nós. Seja qual for. Qualquer código que queremos retornar, qualquer resposta que queremos enviar de volta e qualquer funcionalidade que queremos construir, nós apenas construímos dentro, dentro deste bloco, um código aqui. Então, a próxima lição que vamos estar olhando em um pouco mais de detalhes caixas de seleção e como trabalhar com caixas de seleção, e nós também vamos estar adicionando em alguma funcionalidade realmente legal dentro J query. Então isso está chegando na próxima lição. 6. Resposta de AJAX de evento jQuery do servidor: nas lições anteriores vimos como adicionar alguns ouvintes de eventos ao nosso formulário dentro J sair usando consulta J. Então esta lição eu quero aprofundar o que podemos fazer sempre que tivermos alguma interação em nossas formas, e eu quero torná-la um pouco mais interessante. Então eu tinha uma pergunta antes sobre bem, eu quero ter uma interação de forma, mas eu quero fazer uma chamada Ajax dentro dessa forma em tração. Então o que eu fiz foi configurar um arquivo PHP. É uma constricção básica para isso. Ele apenas o chamou de Ajax dot PHP E tudo isso vai fazer é pegar qualquer dado que está sendo postado e essencialmente enviar isso de volta. Então, quaisquer dados que temos, estamos postando como nome. Ele vai retornar isso de volta como o texto de resposta ou o texto de saída dentro do Ajax dot PHP E então nós usamos Ajax em RG Query, a fim de pegar isso. E, claro, Ajax é uma das melhores coisas. Mas coisas quase favoritas sobre J Query é porque ele apenas torna tão simples e fácil de usar . Então aqui temos o nosso formulário. Então vamos estranhar no primeiro ouvinte evento no meu elemento clicker. Então eu vou mover um pouco desse código para baixo e isso foi da última lição. E vamos dar uma olhada no meu clicker. Então, como adicionamos um ouvinte de eventos e um novo ouvinte de eventos ouvindo clique? E, claro, precisamos incluir esse hash lá. Então, no meu clicker como vamos adicionar no ouvinte de eventos Então nós adicionamos, clique e, em seguida, temos uma função aqui. E talvez o que queremos fazer é em vez de ter a função aqui, vamos criar uma função separada que vai fazer a chamada Ajax. Mas também queremos remover. Gostaria que esse padrão aqui porque se você notar que meu clicker é um hyperlink, então precisamos adicionar em que remover a prevenção do padrão também. É uma das coisas que temos de ser cautelosos porque não quero que isso vá para outra página. Então vamos construir isso em primeiro lugar e vamos apenas fazer o padrão e evitar e isso irá remover esse padrão onde hiperlink vai para uma nova página e, em seguida, talvez a partir daqui podemos simplesmente chamar mais para outra função. E então essa função será aquela que realmente faz a chamada Ajax. Vamos criar uma nova função e o que vamos chamar essa função? Talvez chamemos de meu Ajax e Páscoa. Alguns argumentos, dados da Páscoa para que tenhamos algo para trabalhar com o seu e, em seguida, a partir daqui vai chamar para a minha função Ajax. E, claro, nós vamos ter que fazer algumas atualizações para este S O por agora, nós vamos apenas chamar sobre essa função e eu vou mostrar a vocês o que acontece agora e então nós vamos construir para isso. Oh, talvez o que eu quero fazer é configurar alguns novos dados lá. É um novo objeto de dados e tem algum conteúdo lá porque no PHP, nós estamos esperando para ser passado um valor um valor postado de nome. É o que vamos fazer. Defina isso aqui e talvez o que queremos fazer são dados da Páscoa como o nome ou algo assim. Então, por enquanto, vamos tirar o nome desta área de texto, e eu vou colocar um padrão aqui de teste. Então nós pegamos o valor do meu A e, claro, nós provavelmente vamos ter que fazer algumas atualizações para isso, mas isso foi apenas para demonstrar, fazê-lo funcionar, e então nós vamos fazer algumas atualizações para ele. Então, vamos pegar o valor de lá, então v a l para pegar o valor. Então agora novos dados vão conter e enviar sobre o valor desse campo com o qual estamos trabalhando. E agora, é claro, montamos nossa ligação para o Ajax. Vai ser muito fácil enviar isto. Então, a primeira coisa que precisamos dentro do Ajax é que precisamos identificar o URL para o qual estamos enviando . Então isso é Ajax PHP separado por vírgula. Então quase fechei isso. Eles especificam o apertado, que vai ser post e novamente, isso tem que ser esquartejado em torno de dados separados por vírgula e estamos passando essa nova variável de dados e no sucesso. Nós vamos talvez executar uma função aqui, e eu posso realmente mudar isso para, uh talvez apenas um por agora, e vamos ver como vamos trabalhar com isso porque eu queria usar dados na resposta de volta do servidor. Você é um ex. Então, recuperamos toda essa informação. Podemos dar uma olhada nisso mais de perto. Então log console e vamos fazer S h r e puxar para trás o texto de resposta. Então console desconectado, fora, e, em seguida, talvez também colocá-lo dentro do campo de saída para que possamos realmente ver que sendo puxado para trás e para fazer este em html. Então, como Teoh muda as coisas um pouco às vezes. Então, responda o texto. E então talvez nós também podemos ter algo Se nós temos alguns erros chegando através e para funcionar, e nós vamos passar de volta todos esses valores em que variáveis de cena E este aqui, talvez nós vamos apenas log que X hrs com console . Encerre todo esse objeto para que possamos dar uma olhada nele mais de perto. Se lançarmos alguns erros, então vamos ver o que acontece. Então você acha que isso vai funcionar? Vamos pegar o valor do meu teste A. Sempre que clicarmos no botão meu clicker e tentar enviar isso para o servidor, pegá-lo no servidor e postá-lo um valor enviado isso e retornar isso de volta à nossa página da Web . Vamos dar uma olhada nisso. E, claro, temos um ar. linha 66 deles. Então eu coloquei isso lá por engano. Então, não foi? Não precisa fechar isso, porque isso é um objeto. Então veja o que acontece. Então fizemos a reviravolta completa. Nós enviamos, o teste enviou para o servidor. E esta é a resposta do servidor. E então, é claro, podemos trabalhar com isso e podemos atualizá-lo conforme necessário. Então eu tenho toda essa funcionalidade funcionando e pronta para ir, hein? Então, o que acontece agora se quisermos realmente passar alguma informação? Então, se quiser voltar, talvez dois que caíram na Páscoa, isso e passado isso para o servidor. Eso. Podemos fazer isso. E é muito fácil fazer isso porque temos essa função configurada para que possamos se precisarmos dela. Se for necessário, podemos enviar um valor dentro dessa função e em vez do uso, este é o valor que podemos enviar o argumento que é enviado lá. Então vamos mudar as coisas um pouco aqui. E também eu quero executar essa função que minha função Ajax. Então, sempre que fizermos uma mudança que vamos mudar ou enviar o valor, vamos ver como isso funciona. Então acredite que ainda temos essa ligada. Então vemos que enviou isto. Minha opção dois é fazer uma viagem de ida e volta para o servidor que está sendo devolvido. E então este aqui, fazendo a mesma coisa ida e volta ao servidor, devolvendo essa informação de resposta. Então, assim como o que fizemos aqui com o clique na opção que drop-down opções, também podemos trabalhar em que chamada Ajax com outros botões de verificação e botões de rádio. E também, podemos fazer muito mais. Então tudo isso está chegando no próximo conjunto de lições. Oh, isso vai ser realmente coisas interessantes que vamos ser capazes de fazer com Jay Query. E nós também vamos estar olhando para GE Cree você por que bem, então isso está tudo chegando 7. Botões de jQuery e rádio e caixas de seleção: nesta lição. Vamos olhar para caixas de seleção e botões de rádio e como você usá-los junto com Jay Query e como torná-los funcionais. Então aqui temos algumas caixas marcadas e o que queremos fazer. Em última análise, talvez queiramos ouvir isto. Então vamos olhar as caixas de seleção primeiro e depois os botões do leitor. Talvez quando me examinarmos, queiramos ter um pequeno aviso aparecendo. Ah, e apenas para confirmar que os usuários fazem sua escolha. Então talvez isso me verifique se foi deletar ou excluir algo. Queremos ter um prompt aparecer, e isso vai ser muito fácil de fazer dentro da consulta J. Então a primeira coisa que queremos fazer é, é claro, ligar nossos ouvintes de eventos. Então eu tenho que fazer isso usando o ouvinte de evento on. Então eu vou fazer isso. É a mesma coisa que isso é apenas maneiras diferentes de escrevê-lo. E, de preferência, carregue o seu evento. Os ouvintes precisam de mais de um evento, Lister. Se você precisar remover seus ouvintes de eventos, esta é a maneira preferível de fazer. Estou só a olhar para o nome “i d”, por isso é o meu cheque. Estou só a olhar para o nome “i d” Esse é o que vamos adicionar que o ouvinte também. Então esse é o meu cheque. E o ouvinte de eventos vai tocar o manipulador de eventos para o elemento e nós vamos estar ouvindo a mudança. E então uma vez que essa mudança ocorra, eles iriam disparar nossa função aqui. Alguém a princípio podemos apenas consolar, logar o conteúdo. Eso 1º 1 nós vamos apenas o log do console saiu. E também talvez aqui na parte inferior irá atualizar que áreas de saída que área de saída favorita onde temos alguma saída de html. Vamos apenas para que saibamos que, na verdade algo aconteceu, verificado, mantê-lo realmente simples. Então, e é claro, temos essa informação que vai aparecer no console. Então, uma vez que verificamos, vemos que somos verificados e retornamos as informações do objeto. E, claro, podemos trabalhar com isso e utilizar essa consulta de energia também. Então eu quero adicionar uma pequena caixa pop-up que vai apenas me pedir para confirmar se onde, se queremos fazer este cheque e está aqui. O que eu preciso fazer é confirmar que ele está realmente marcado porque eu não quero disparar se o se ele não está marcado. Então eu quero ter certeza de que a propriedade está verificada ou não Checker, mas na verdade está verificada. E se estiver verificado, vamos disparar isto. Então, uma vez que essa condição é atendida, bem, talvez configurar uma variável só para ver se a camisa do usuário e o fogo fora confirmado. Então faça algo assim. Então isso vai fazer o isso está configurando nosso prompt e vamos fazer isso verificado. E se isso for verificado, então será igual a certeza. Então vamos dar uma olhada rápida e ver como tudo isso vai se encaixar. Então, refresque-o. E sempre que verificamos agora, temos este prompt alguns temos que bater ok para continuar, então nós verificamos. E se cancelarmos o aviso de que a marca estava ausente para que não concluísse a verificação. Então é assim que você adiciona talvez, como uma verificação dupla, ou para ter certeza de que você tem que os usuários que você tem a atenção do usuário que você quer ter certeza de que eles estão de fato querendo marcar isso fora. Eso Vamos olhar para esta outra caixa de seleção e vamos fazer algo acontecer com isso. E assim o que eu quero fazer. Talvez eu queira apenas ocultar e mostrar essa saída ou eu quero ocultar e mostrar uma seção. Então ele está abrir nosso editor novamente, e eu quero realmente destacar essa área de saída. Então eu vou dar a cor de fundo. Então talvez algo que realmente se destaca, dê , dê a ele uma fronteira também. Ou talvez eu poderia até ir a picaretas ou algo assim e fazer beicinho em torno dele. Vamos ver o que acontece agora. Então guarde isso. Refresque-o porque eu realmente quero que isso apareça e quero ser realmente perceptível aqui. Eso voltar ao nosso código e isto vai ser muito simples. Então, serão apenas algumas linhas de código. Então a primeira coisa que eu quero fazer, claro, é adicionar meu ouvinte de eventos para que eu possa adicioná-lo na mudança. Eu posso adicioná-lo no clique eso. Qualquer um vai disparar e só para mostrar que ainda vai disparar. Mas eu, em última análise, o que eu quero fazer é que eu não quero que ele apenas dispare toda vez que é clicado. Quero que dispare toda vez que o botão estiver mudando. Então é por isso que eu vou usar na mudança e novamente para agitar as coisas ainda mais. Vou te dar mais algumas opções do que podemos fazer com o cheque. Então vamos em vez de fazê-lo, neste formato, vamos fazê-lo desta forma. Então, basta fazer a função on click dentro disso. E, claro, se você estiver usando navegadores mais antigos, talvez queira tentar evitar esse tipo de formato. Mas ambos funcionarão dentro do cromo. Então, de qualquer maneira, e então, claro, se você está se escondendo em ouvintes de eventos dinamicamente, geralmente esse é o melhor caminho a seguir. Mas há variações que você também pode fazer. Então, registro do console. E então, na verdade, eu deveria mudar isso para mudar porque nós já falamos sobre Click. Então, sempre que isso mudar, então nós vamos ter certeza e fazer essa verificação dupla para ver se ele está verificado e se ele está marcado fora do que o que nós vamos fazer é fazer uma seleção fora de saída. E nós vamos fazer isso construído no método show e dentro e então aqui e fazer exatamente o oposto aqui. Então, se está desmarcado do que o que vamos fazer é simplesmente escondê-lo e embelezá-lo, torná-lo um pouco mais legível. Então vamos ver como isso funciona. Então agora podemos escondê-lo. Podemos mostrar essa seção de saída simplesmente marcando um botão ou verificação de uma caixa de seleção. E para os rádios também. Você deve usar a mudança em vez do clique porque queremos que ela em Leigh seja disparada sempre que houver uma mudança real de valor. Há o apenas para mostrar que um muito rápido também. E com os botões de rádio, não lhes demos nada por isso vamos usá-la. Vamos fazer uma seleção disso usando os pais, e acredito que os pais são a minha forma, e vamos procurar rádio de entrada e fogo de troca desta função. E talvez por enquanto, o que queremos fazer é atualizar algo nessa saída. Então só mudar o rádio. Então a escola volta bonito e refrescá-lo. Então agora toda vez que essa mudança veria que o rádio mudou. Então também pode ser o que você quer fazer é realmente obter o valor de sim e não. Então isso é muito fácil de fazer também. Então podemos simplesmente mudar de rádio para e adicionar esse valor em seu on. E então, é claro, podemos obter o valor do elemento ativo apenas fazendo usando isso. Então eu vou selecionar isso e selecionar o valor ativo dele. Então vamos ver se isso funciona e o rádio mudou também. Sim, mudança de rádio para saber. Então agora temos toda a funcionalidade dela lá dentro, e é claro que podemos fazer. Podemos anexar essas chamadas do Ajax tão facilmente a qualquer uma dessas. Uma ondulação como fizemos antes. Então, se eu quiser anexar a chamada do Ajax, eu obviamente poderia colocar os macacos de carvão lá também. Mas vamos fazer assim. Onde, e eu tenho uma variável para resultados, então eu tenho que continuar digitando isso e atualizar isso para resultar também Então, na verdade, eu acho que já estamos colocando a sua nessa chamada. Então nós vamos realmente produzir duas saídas lá. Então talvez possamos sequestrar o status. Então atualize o status. Então vemos que agora fizemos a viagem completa lá. volta. Atualizamos o status enviado este rádio mudou também. Sim. E, claro, mesma coisa. Se você quiser adicioná-lo nessas caixas de seleção, selecione todas as caixas da mesma forma, podemos simplesmente adicionar facilmente que Ajax chamá-lo. Então, na próxima lição, vamos olhar para o J Coury, seu sábio. Esse é o que todos nós estávamos esperando. E isso vai ser uma lição muito interessante, e isso está chegando a seguir. 8. Configuração de autocompletar da interface do usuário do jQuery: nesta lição. Quero dar uma olhada no J Coury. Você eu e apenas passando por isso, eu percebo que eu realmente não uso Jake Ray você tanto quanto eu deveria, porque é muito legal. Ele dá-lhe a capacidade de todos estes direita da caixa, construído em recursos enfraquecer, fazer acordeão, auto, seletor de data botão completo, barra de progresso e apenas um monte de coisas realmente legal. Então, nesta lição, vamos estar olhando para auto completo e essencialmente, o que auto completo faz é exatamente como o nome indica. Assim que você começar a digitar, ele irá procurar alguns resultados que correspondam ao que você está digitando. Isso é incorporado e permite que você preencha rapidamente uma lista de valores. E esta é uma funcionalidade muito elegante. E como eu disse, eu só às vezes eu gostaria de usar Jake taxa você eu sou ou porque ele tem tantas peças incríveis de funcionalidade que são apenas construídos para fora da caixa. Então, para acessar Jake Ray, você, vamos adicionar primeiro. Nós estamos indo para o Google aqui para pegar suas bibliotecas compartilhadas, e eu vou pegar este para J coury você I Então ele vem com CSS porque nós queremos ter aquele estilo lá. E, claro, você pode estilizar você mesmo uma ondulação. Então eu vou apenas adicionar esse e voltar aqui e adicionar a consulta G. Você eu também, então eu costumo colocar o J Corey em primeiro lugar e depois a biblioteca J Coury U Y. E então isso me dá acesso total a ambos. E agora eu posso começar a usar e utilizar o J coury você I e uma das coisas que eu preciso para um auto completo é realmente precisar de alguns dados. Eu poderia, obviamente, eu poderia criar uma matriz aqui, Então eles têm um bom exemplo aqui onde eles criam uma matriz de tags disponíveis em, e então eles simplesmente usam essas tags, conectá-la ao widget aqui, e coloca-os como tags. Então vamos dar um passo adiante e fazer nossas tags disponíveis extraídas do usuário aleatório ponto Emmy. E só para mostrar o que este site faz, é essencialmente nos dá eso. É o usuário aleatório Emmy. Mas este é o A P I, que nos dá uma lista de apenas alguns usuários aleatórios. É um site muito limpo, especialmente quando você está desenvolvendo um código praticante. Vemos que podemos obter esses usuários aleatórios em tempo real. E novamente, é realmente útil quando você está fazendo desenvolvimento para que você não tenha que passar por todo o problema de realmente criar usuários criando arquivos e dados do Jason. Então vamos analisar isso e escolher o que precisamos para pegar os nomes de usuário . Então, talvez nós vamos com os resultados de 50. Então vamos começar. E o que eu quero fazer é trabalhar fora deste campo aqui. Então este campo de teste, o que eu quero que aconteça é ter um menu suspenso, começar a preencher esses dados e então realmente fazer essa lista suspensa sugerir nomes adicionais . E então, é claro, toda vez que eu recarrego que um p I em outra lista diferente de nomes. Então isso é novamente para fins de demonstração. Eles provavelmente não vão querer ter um menu de mudanças. Talvez você saiba, mas é com isso que vamos trabalhar neste exemplo, porque vamos ter uma lista aleatória sempre mudando cada vez que eu atualizá-lo, temos uma nova lista, então eu só quero que você saiba disso. E é por isso que vamos ter uma lista diferenciadora à medida que passarmos. Então o que eu quero fazer é abrir e adicionar. Talvez possamos realmente adicionar em um campo completamente separado aqui s para que não estejamos interferindo com o que fizemos antes. Então configurar classe DIV e eu vou dar-lhe I que ele porque eu estou usando o CSS consulta J também. E eu vou fazer isso semelhante ao que eles fizeram, onde eu tenho minha gravadora para e eu tenho uma chamada para aquele pesquisador de campo me procurar e fechar essa etiqueta e agora configurar minha entrada e tudo o que eu preciso fazer é identificá-lo. identificá-lo Nós já identificamos que vamos chamá-lo de busca ou sua dentro dos rótulos estavam apenas indo para ficar com isso. E lá vamos nós. Então isso nos dá que trabalhar com o dedo do pé do campo. E agora, quando começarmos a digitar no campo, vamos tentar completar isso automaticamente. Então vamos configurar uma variável. Então essa variável é onde vamos manter nossos valores. Então talvez nós vamos apenas configurar uma matriz, e então eu vou colocar dentro dessa matriz um B c para que nós apenas temos alguns dados iniciais apenas para ter certeza de que tudo está funcionando corretamente. Então faça algo assim. E agora vamos fazer essa magia acontecer. Eu estava tão ligado a revistá-la, e nós vamos colocar auto completo e nossa fonte então esta vai ser a fonte dos dados . Então nós estamos usando este, uh, este array aqui e então nós temos algumas opções aqui. Então, se queremos várias opções, vários drop downs, vários itens e deve corresponder, também podemos fazer uma correspondência no caso. Nós vamos fazer uma falsa nisso porque nós realmente não temos muitos detalhes lá. Então vamos ver o que acontece agora, então eu vou atualizá-lo. E agora temos a nossa entrega lá em baixo. Então isso está funcionando. Agora tudo o que precisamos fazer e como eu disse, é apenas o salame e você tira toda essa funcionalidade da caixa. Basicamente o quê? Eu fiz aqui é que eu configurou minha matriz de tags disponíveis e eu configurou auto completo. E então eu só arrumei isso. Do homem. Certifica-te de que as minhas etiquetas coincidem com lá e é tudo o que temos de fazer ao Teoh. Faz com que o auto completo funcione. Mas eu quero dar um passo adiante porque eu quero adicionar neste array que podemos usar fora da chamada Ajax. Porque eu queria focar muito no Ajax dentro disso, é claro. Então eu queria trazer isso para dentro, então eu vou te mostrar como fazer isso na próxima lição. 9. Autocompletar da IU do jQuery a partir do arquivo JSON dinâmico: tomando o que aprendemos nas lições anteriores, quero aplicar isso ao que vamos fazer agora. Então, na última lição, olhamos como geek onde você trabalha com a facilidade com que podemos adicionar um auto completo. E agora vamos apenas melhorar isso fazendo nossa matriz aqui dinamicamente alterada. Então, por padrão, nós configuramos um array realmente básico, então eu não tenho um monte de dados, mas eu quero ser capaz de puxar essa lista completa de nomes de usuários aleatórios e utilizá-los e realmente empurrá-los para o meu ar e. Então vamos checar isso e ver como isso vai funcionar. Então, uma das coisas que eles precisam anexar é um ouvinte de eventos para revistá-la. Então é isso que vou fazer. Eu vou fazer o pesquisador, e eu vou usar essa chave para cima porque eu quero uma vez que alguém realmente fez alguma mudança, eles levantaram o dedo da chave e a chave apareceu de volta. É quando eu corro e corro. Esta função é este é o meu melhor momento para executar essa função, e eu preciso realmente pegar o valor que vai estar dentro desse resultado. Então eu vou colocar como texto de busca, e eu vou colocar isso aqui, mas talvez não. Eu só estou pensando sobre isso agora que talvez não precisamos utilizar isso porque o realmente o auto completo está cuidando de um monte disso. Mas se formos construir nosso próprio auto completo, se estamos procurando um banco de dados e nós definitivamente precisaríamos pegar esse texto de pesquisa e utilizá-lo Então, se você não estiver usando o auto complete, então você provavelmente precisa configurar esse valor. E eu não tenho certeza se eu não acredito que nós vamos ter que configurar isso agora, então eu vou continuar e redefinir o valor fora da matriz e eu defini para um comprimento de zero. E então é aqui que trazemos Ajax e Ajax em J. Query é tão simples e fácil de usar. Então, a primeira coisa que precisamos fazer é configurar. Você é Earl? Então é colocar no nosso navegador, e esta é a garota que vamos usar. Então , volte e adicione isso aqui neste objeto e nosso tipo de dados. Então esse é o tipo de dados do Jason. Então eu preciso especificar que estamos esperando Jason Data e no sucesso. Então, nossa função de sucesso aqui, vai retirar todos os dados, e agora só precisamos utilizá-los. Então vamos fazer um rápido console sair dos dados apenas para ter certeza de que estamos pegando tudo e que somos capazes de utilizá-lo. Então veja o que acontece agora indo para aqui. E agora quando eu começar a digitar aqui, estamos fazendo ah query para aquele usuário aleatório Emmy. E nós temos essa matriz de objetos de 50 objetos diferentes e temos todos esses nomes aqui. Então temos nomes e sobrenomes. Então talvez o que vamos olhar agora é olhar para o primeiro nome e tentar preenchê-lo automaticamente. Então, se eu estava digitando T que eu deveria ver, Tammy e eu deveríamos ver uma lista completa de possíveis nomes que eu quero usar caindo lá embaixo . Vamos voltar ao nosso código e realmente vamos nos livrar de muitas dessas outras coisas porque nós realmente não precisamos mais dele. Talvez fique com isso. Poderia colocar apenas no caso de lá e continuar a construir isso. Então vamos dar uma olhada no sucesso aqui. Então agora nós temos no objeto O trabalho de Basta através de cada um e cada um único resultado lá. Então, basta fazer dados e resultados. Então nós retiramos todos os resultados lá que estão sendo retornados de nossa chamada Ajax e o que vai fazer uma função aqui. Então temos a nossa chave. Temos o nosso valor e precisamos empurrá-lo para a nossa matriz. Então acabamos de zerar nossa comida ou chuva. Eso precisa empurrar alguns valores para lá. Então nome v primeiro e o que isso vai fazer é este vai loop através de todos esses objetos e preencher oito nossa matriz com todos os primeiros nomes. E só para mostrar o que aconteceu aqui, nós vamos realmente Will Cônsul desconectado. É assim que terminarmos de construir a preocupação que o Cônsul registrou. Poderíamos dar uma olhada no console também. Então é a atualização que. E agora, quando começo a digitar, vejo que recebo essa lista completa de nomes que tenho acesso. Esta é essencialmente a nossa nova taxa. E eu poderia realmente facilmente fazer algumas mudanças aqui apenas através do menu suspenso. E como eu disse antes, esta é a Marie aleatória. Então você pode não necessariamente ter uma Marie aleatória com quem você está trabalhando. Então, toda vez que eu faço a chave aqui, nós vamos consultar e nós vamos obter um novo conjunto de nomes, então eu não penso em nada. Eles estão começando com a ajuda do Q, tem A nele. E é claro que não podemos. Podemos realmente personalizar isso conforme necessário dentro do nosso código s Oh, isso é novamente puxando de uma matriz aleatória de usuário e apenas nos dando uma lista completa de todos esses nomes de todos os 50 nomes. Estamos deixando-os em Honore e, em seguida, apenas usando que dentro J coury auto complete você I Isso é como nós somos capazes de criar em auto completo. E, claro, toda vez que o recarregamos, carregamos um novo conjunto de nomes de usuário, e então poderíamos simplesmente selecionar e fazer nossa seleção a partir do menu suspenso, e isso automaticamente preenche esse campo as possibilidades para algo assim. Há um monte de coisas diferentes que você pode fazer como você trabalhar fora com isso e realmente auto completar G. Koury. Por que são um monte de realmente grande construído em funcionalidade e, em seguida, transformá-lo em e trazê-lo em uma taxa Ajax chamado para que eso que realmente faz nossa forma realmente dinâmico e populating. Por isso, encorajo-te a dar uma vista de olhos nisto. E, claro, você pode ou não estar usando os ativos dentro do mesmo formato em que você está usando chamadas Ajax. Você pode ter algo que é codificado ou um array que você pega no seu servidor. Eso de novo. Dependendo de qual é o seu cenário, você pode aplicar diferentes tipos de lógica e obter alguns resultados realmente interessantes quando se trata de suas formas e pedreira G.