Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

  • Conteúdo Similar

    • Por clovis.sardinha
      Tenho uma consulta de autocomplete no bd que funciona no servidor local e não roda no servidor da web. 
      Ao enviar a consulta no servidor local  aparece no console :Fetch terminou o carregamento: GET ".../Cidade?cidade=sao%20paulo". A pesquisa é feita normalmente.
      Quando mando a mesma pesquisa para o servidor web(locaweb) aparece no console: Fetch terminou o carregamento: GET "..../Cidade?cidade=sao%2520paul".
      O número 25 aparece só no servidor web. Pelo que pesquisei 25 significa %, ou seja, está duplicando o caractere %. 
      Não consegui utilizar nenhuma função para evitar que isto ocorra. Alguém sabe se há alguma configuração no servidor web que possa ser alterada para evitar essa duplicação?
       
    • Por clovis.sardinha
      Estou em um impasse pois sei pouco de javascript. Estou fazendo um autocomplete com CI4 e Javascript.
      Consigo gerar, através do controllers/model do CI4 um arquivo em json, mas não consigo retorná-lo para o javascript para poder mostrar as opções para consulta. 
      O console.log mostra que estou obtendo o  json() { [native code] }.
      Segue os dois arquivos para ver se alguém me ajuda.
      //arquivo cidade.js async function carregar_cidade(valor) { if (valor.length >= 3) { //console.log("Pesquisar:" + valor); const dados = fetch('Testes/?cidade='+valor, { method: "get", headers: { "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest" } }); const resposta = (await dados).json; console.log(resposta); var html = "<ul class='list-group position-fixed'>"; html += "<li class='list-group-item'>" + resposta['cid_nome'] + "</li>"; html += "</ul>"; } } <?php //arquivo Testes.php namespace App\Controllers; use App\Models\CidadeModel; /** NÃO MANDAR PARA O SERVIDOR - APENAS TESTES DE FUNÇÕES E OUTROS ELEMENTOS DO CI4 */ class Testes extends BaseController{ protected $tbCidades; public function __construct(){ $this->tbCidades = new CidadeModel(); } public function index(){ $request = \Config\Services::request(); $client = \Config\Services::curlrequest(); $cidades=[]; if($get=$request->getGet()){ $cities=$get['cidade']; $cidadeFiltrada=$this->tbCidades->getCidByName($cities); $cidades= json_encode($cidadeFiltrada); //dd($cidades); } echo view('Testes/testes'); } public function salvar(){ $request = \Config\Services::request(); if($post=$request->getPost()){ dd($post); } } } <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Autocomplete</title> </head> <body> <div class="container"> <h1 class="mt-4 mb-4">Formulário</h1> <form class="row g-3"> <div class="col-12"> <label for="cidade" class="form-label">Cidade</label> <input type="text" name="cidade" class="form-control" id="cidade" placeholder="Pesquisar cidade" onkeyup="carregar_cidade(this.value)"> </div> <span ></span> </form> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="assets/js/cidade.js"></script> </body> </html>
    • Por Sapinn
      Fala galera! Tenho um site que possui alguns icones que são puxados da biblioteca flaticon , o problema é que de uma hora pra outra esses icones pararam de aparecer. No meu ambiente local funciona, mas no ambiente de produção eles não aparecem e eu recebo o seguinte erro no console: Failed to load resource: the server responded with a status of 404 () 
       
      Alguém saberia como resolver isso?
    • Por klonder
      Olá a todos(as)!
      Estava há 3 dias pesquisando sobre como resolver um problema que estava enfrentando em meu sistema, que consistia no seguinte:
      Implantar um Combobox com dados vindos do banco. Esse combobox deveria ser editável e apresentar os valores em seu popup suspenso. À medida em que o usuário fosse digitando, o autocomplete faria a busca em todos os valores já cadastrados e mostraria os compatíveis (procedimento até então comum em qualquer autocomplete). Todavia, o combobox só poderia perder o foco caso o texto inserido fosse exatamente igual a um dos valores existentes no popup, ou seja, não poderia ser  inserido nada que já não estivesse cadastrado anteriormente e presente na lista de valores.
      Após muito pesquisar, cheguei a um resultado muito satisfatório que compartilho com vocês, visto que varri a internet inteira à procura desse código e não encontrei em lugar nenhum. PyQt5 é extremamente pobre em tutoriais, principalmente em português.
       
      Segue o código que poderá ajudar quem precise:
      from PyQt5 import QtGui, QtCore, QtWidgets from PyQt5.QtWidgets import QApplication, QWidget, QMainWindow, QComboBox, QLineEdit, QCompleter from PyQt5.QtCore import QSize, Qt, QSortFilterProxyModel, QStringListModel class Ui_Autocomplete(QMainWindow): def __init__(self): super().__init__() self.initUI() def initUI(self): self.setGeometry(300, 200, 800, 600) self.setWindowTitle('Autocomplete com combobox') self.cboxEstado = QComboBox(self) self.cboxEstado.move(50, 50) self.cboxEstado.addItem("Acre") self.cboxEstado.addItem("Amazonas") self.cboxEstado.addItem("Amapá") self.cboxEstado.addItem("Pará") self.cboxEstado.addItem("Rondônia") self.cboxEstado.addItem("Roraima") self.cboxEstado.addItem("Tocantins") self.cboxEstado.addItem("Distrito Federal") self.cboxEstado.addItem("Goiás") self.cboxEstado.addItem("Mato Grosso") self.cboxEstado.addItem("Mato Grosso do Sul") self.cboxEstado.addItem("Alagoas") self.cboxEstado.addItem("Bahia") self.cboxEstado.addItem("Ceará") self.cboxEstado.addItem("Maranhão") self.cboxEstado.addItem("Piauí") self.cboxEstado.addItem("Pernambuco") self.cboxEstado.addItem("Paraíba") self.cboxEstado.addItem("Rio Grande do Norte") self.cboxEstado.addItem("Sergipe") self.cboxEstado.addItem("Paraná") self.cboxEstado.addItem("Rio Grande do Sul") self.cboxEstado.addItem("Santa Catarina") self.cboxEstado.addItem("Espírito Santo") self.cboxEstado.addItem("Minas Gerais") self.cboxEstado.addItem("São Paulo") self.cboxEstado.addItem("Rio de Janeiro") self.cboxEstado.setEditable(True) self.cboxEstado.completer().setCompletionMode(QCompleter.PopupCompletion) self.cboxEstado.completer().setFilterMode(Qt.MatchContains) self.cboxEstado.completer().setCaseSensitivity(QtCore.Qt.CaseInsensitive) self.cboxEstado.focusOutEvent = self.pedeuFoco self.leRegiao = QLineEdit(self) self.leRegiao.move(250,50) self.leRegiao.resize(200, 22) def pedeuFoco(self,event): occur = 0 for i in range(len(self.cboxEstado)): if self.cboxEstado.currentText() == self.cboxEstado.itemText(i): occur = occur+1 if occur == 0: self.cboxEstado.lineEdit().setFocus() self.cboxEstado.lineEdit().selectAll() else: #Retira o cursor do widget QComboBox.focusOutEvent(self.cboxEstado,event) if __name__ == '__main__': import sys app = QApplication(sys.argv) mainWin = Ui_Autocomplete() mainWin.show() sys.exit(app.exec_())  
       
    • Por sthefany silva
      Olá, minha dúvida é ao fazer um selecte em algum as opções do autocomplete mostrar contudo na pág. e ao limpar os dados inseridos no input fazer com que volte ao estado anterior. 
       
      ou seja, ao seleconar ele abrirar o que foi seleconado, ao limpar campus do input mostrar topicos anterior.
       
       
      segue abaixo meus códigos: 
       
      HTML:
       <form class="submit-line" id="form">                           <input  id="buscaPerguntas" autocomplete="off" class="form-control input-faq"                          placeholder="Digite palavras-chaves para pesquisar" style="padding: 28px;">                       </form>                 </div>               </div>         </div>         <div class="row">             <div id="buscaPerguntas-description">             </div>         </div>

                <div class="divFaq" id="listaFaq">             <div class="row">                 {% for valor in faq%}                   <div class="col-sm-12">                       <div class="boxFaq">                         <a class="btn btn-faq accordion" type="button" data-toggle="collapse" data-target="#{{valor.id}}" aria-expanded="true">                              {{valor.pergunta}}                         </a>                     </div>                 </div>                   <div class="col-sm-12">                     <div id="{{valor.id}}" class="collapse">                         <div class="boxFaq">                             <div class="card-body">                                 <div>{{valor.resposta|raw}}</div>                             </div>                         </div>                     </div>                 </div>                   {% endfor %}               </div>
         
       
       
      JAVASCRIPT:
       
      $(function () {       $("#buscaPerguntas").autocomplete({           autoFocus: true,         minLength: 1,         appendTo: '#form',         source: function (request, response) {                        $.ajax({                 url: '/pesquisafaq',                 type: 'post',                 data: {                     dadosPesquisa: request.term                   }                               }).done(function (data) {                   let parse = JSON.parse(data)                   if (parse.length > 0) {                       let dados = Object.values(parse).map((e) => {                           return {                             label: e.pergunta,                             desc: "<div class='divFaqCollapse'><div class='col-sm-12'><div class='boxFaq'><a class='btn btn-faq accordion' type='button' data-toggle='collapse' data-target='#collapse' aria-expanded='true'>" + e.pergunta + "</a></div></div> <div class='col-sm-12'> <div id='collapse' class='collapse'> <div class='boxFaq'> <div class='card-body'> <div>" + e.resposta + "</div> </div> </div> </div> </div> </div>",                           }                       })                     response(dados.slice(0))                 }                                });           },         select: function (event, ui) {               $("#buscaPerguntas").val(ui.item.label);             $("#buscaPerguntas-description").html(ui.item.desc);                        $('#listaFaq').hide();             $('#buscaPerguntas-description').show();                      }       })   });  
×

Informação importante

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