Ir para conteúdo
Entre para seguir isso  
Jeraldo Setefuz

Chamar Autocomplete em TextArea

Recommended Posts

Boa Noite

 

Eu sou bem iniciante em Javascript, não sei muita coisa. Mas estou desenvolvendo um sistema de chamados em PHP + Mysql. Entao eu tenho em uma página que o usário consegue inserir um comentário em seu chamado.

 

Só que gostaria que qndo ele digitasse @@ aparecesse uma lista de autocomplete dos usuário cadastros no banco. Tipo o facebook que ele vai puxando os usuário.

 <div class="widget-header">
                                        <i class="icon-list-alt"></i>
                                        <h3>Chamado Número <?php echo $id;?></h3>
                                    </div> <!-- /widget-header -->

                                    <div class="widget-content">
                                        <?php mostraChamado($id); ?>
                                       <?php mostraComentarios($id); ?>
                                    </div>
                                </div>
                                <div class="widget-header">
                                    <i class="icon-comments-alt"></i>
                                    <h3> Incluir Novo Comentário </h3>
                                </div>

                                <div class="widget-content">
                                    <div class="tab-pane active" id="formcontrols">
                                        <form id="chamado" class="form-horizontal" method="post" action="" enctype="multipart/form-data">
                                            <div class="control-group">                                         
                                                <label class="control-label">Descrição</label>
                                                <div class="controls">
                                                    <textarea type="text" class="span10" id="comentario" name="comentario" rows="5" required="true"/></textarea>
                                                </div> <!-- /controls -->               
                                            </div> 
                                            <div class="control-group">                                            
                                                <label class="control-label">Arquivos</label>
                                                <div class="controls">
                                                    <input type= file multiple name="arquivo[]" id="arquivo[]"/>
                                                    <p class="help-block">Para selecionar mais arquivos, pressione CTRL</p>
                                                </div> <!-- /control s -->               
                                            </div> <!-- /control-group -->
                                            <div class="form-actions">
                                                <button type="submit" class="btn btn-primary" name="incluir" id="incluir" value="apontar">Incluir Novo Comentário</button>               
                                            </div>
                                        </form>

Entao eu gostaria dentro desse textearea fazer isso.

 

Eu tentei dessa forma mas só quando aperta f10:

        <script src="js/signin.js"></script>
        <script src="js/tags.js"></script>
        <script type="text/javascript">
        $('#usuario').on('keydown', function(event) { // também pode usar keyup
        if(event.keyCode === 121) {
            
                var availableTags = [
                  "ActionScript",
                  "AppleScript",
                  "Asp",
                  "BASIC",
                  "C",
                  "C++",
                  "Clojure",
                  "COBOL",
                  "ColdFusion",
                  "Erlang",
                  "Fortran",
                  "Groovy",
                  "Haskell",
                  "Java",
                  "JavaScript",
                  "Lisp",
                  "Perl",
                  "PHP",
                  "Python",
                  "Ruby",
                  "Scala",
                  "Scheme"
                ];
                $( "#aa" ).autocomplete({
                  source: availableTags
                });
            
             }
        });
        </script>
        <script type="text/javascript">
          

        </script>

Só que não faz nada, mas se eu tiro o pressionar o F10 = 121 dai ele funciona e mostra a lista. Alguém conseguiria me ajudar? Obrigado

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se a ideia é utilizar um AutoComplete igual o facebook.

Busca no google

 

"auto-complete style like Facebook"

Sua busca será mais feliz e seu trabalho menor do que adaptar algo já pronto.

 

Ex:

http://araddon.github.io/aceditable/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

  • Conteúdo Similar

    • Por vazzoler
      Bom dia, pessoal. Gostaria de saber se alguém pode me auxiliar na criação de um campo autocomplete, semelhante ao deste site (https://gofretes.com.br/), mais precisamente no campo de pesquisa de cidades, onde, ao iniciar a digitação no campo, buscaria no banco de dados e completaria o preenchimento?
    • Por PedroFarias
      Bom dia:

      Estou construindo uma aplicação JSP no eclipse photon. Criei três classes uma para acessar (conexão) um banco de dados outras duas [jsp] a primeira um menu para abrir uma outra (segunda), nesta foram criadas: uma tag JavaScript com uma função, uma com a tags <form linhas de comandos /form> essas funcion sem problemas, a ultima que inicia com a tag <% e finaliza com %> não é reconhecida, simplesmente exibe o que é editado inclusive <% %>. Segue classe:
      <!-- <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>-->
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <title>Consultar</title>
      </head>
      <body>
      <%
      out.println("Ola Mundo");
      %>
      </body>
      </html>

      O resultado no meu caso é exibido <%
      out.println("Ola Mundo");
      %>

      e não simplesmente a frase
      Ola Mundo (Como deveria ser)

      Informo que estou usando eclipse Photon, Apache Tomcat 9.0 (funcionando normalmente). O projeto foi adicionado ao servidor Apache. Java 1.8

      Por gentileza . Como devo proceder para que a fase seja exibida sem problemas?
    • Por Rendrix Alves Schweinsteiger
      Meu codigo ta autocompletando suave mas, preciso que ele imprima as informações que vai autocompletado alguem pode me dar um exemplo? 
      meu cod:
      <?php
      $link = mysqli_connect("localhost", "root", "", "projetomodelo");// conexao com o banco
      mysqli_select_db($link, "projetomodelo");
      $result = mysqli_query($link, "SELECT * FROM tb_produto");
      $array = array();
          if($result){
              while ($row = mysqli_fetch_array($result)){
                 $product = utf8_encode($row['nome']);
                 array_push($array, $product);
              }
          }

      ?>
      ;;;;;;;;// algumas partes do formulario // ta td certo por aqui
       
      ;; agora o restante do cod?:
      <input id="tag" value="" >   
              <script type="text/javascript">
                  $(document).ready(function(){
                      var n = <?= json_encode($array) ?>
                      
                         
                           $("#tag").autocomplete({
                               source:n,
                               select:function(event, item){
                                  var params ={
                                      nom: item.item.value
    • Por Alan Quidornne
      Olá Amigos,
       
      Tenho enfrentado uma séria dificuldade ao utilizar o serviço "Autocomplete" do Google Maps API.
       
      Estou desenvolvendo um sistema de reserva de transfers(viagens de carro executivo) na qual o usuário informa a origem e destino de sua viagem e o sistema integrado com o Google Maps calcula o preço da viagem em questão .
       
      A dificuldade que estou tendo é limitar a exibição dos resultados do Autocomplete para locais restritos ao estado do Rio de Janeiro.
       
      Consigo tranquilamente limitar por país, mas para o território do Rio de Janeiro não consegui achar nenhuma função na documentação oficial que me atendesse nessa questão.
       
      Segue código do autocomplete.
      function initialize() { var options = { componentRestrictions: { country : "BR" } }; directionsService = new google.maps.DirectionsService(); var inputFrom = document.getElementById('from'); var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options); autocompleteFrom.addListener('place_changed', function() { var place = autocompleteFrom.getPlace(); placeId1 = place.place_id; }); var inputTo = document.getElementById('to'); var autocompleteTo = new google.maps.places.Autocomplete(inputTo, options); autocompleteTo.addListener('place_changed', function() { var place = autocompleteTo.getPlace(); placeId2 = place.place_id; }); } Se alguém souber e puder fazer a gentileza de me auxiliar nessa questão, ficarei bastante agradecido.
    • Por Alan Quidornne
      Olá Amigos,
       
      Tenho enfrentado uma séria dificuldade ao utilizar o serviço "Autocomplete" do Google Maps API.
       
      Estou desenvolvendo um sistema de reserva de transfers(viagens de carro executivo) na qual o usuário informa a origem e destino de sua viagem e o sistema integrado com o Google Maps calcula o preço da viagem em questão .
       
      A dificuldade que estou tendo é limitar a exibição dos resultados do Autocomplete para locais restritos ao estado do Rio de Janeiro.
       
      Consigo tranquilamente limitar por país, mas para o território do Rio de Janeiro não consegui achar nenhuma função na documentação oficial que me atendesse nessa questão.
       
      Segue código do autocomplete.
      function initialize() { var options = { componentRestrictions: { country : "BR" } }; directionsService = new google.maps.DirectionsService(); var inputFrom = document.getElementById('from'); var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options); autocompleteFrom.addListener('place_changed', function() { var place = autocompleteFrom.getPlace(); placeId1 = place.place_id; }); var inputTo = document.getElementById('to'); var autocompleteTo = new google.maps.places.Autocomplete(inputTo, options); autocompleteTo.addListener('place_changed', function() { var place = autocompleteTo.getPlace(); placeId2 = place.place_id; }); } Se alguém souber e puder fazer a gentileza de me auxiliar nessa questão, ficarei bastante agradecido.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.