Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

91
Vistas
Mostrar otro botón con autocompletar en JS

Estoy tratando de hacer un autocompletado desde json url, funciona bien.

Ahora lo que quiero, es cuando hago clic en autocompletar, quiero mostrar el botón de importación y si la entrada está vacía o ponemos un nuevo valor (no en la importación), mostrar el botón de creación.

Darte un ejemplo de lo que estoy haciendo con algunos datos:

 $('#search-deal').autocomplete({ source: function(request, response) { var data =[{ "id": 1671, "title": "Queens Park Tyres deal" }, { "id": 1672, "title": "Wildman Craft Lager deal" }, { "id": 1673, "title": "General Store deal" }, { "id": 1674, "title": "Deluxe Off Licence deal" }, { "id": 1675, "title": "Ahmed Halal Bazaar deal" }]; var datamap = data.map(function(i) { return { label: i.id + ' - ' + i.title, value: i.id + ' - ' + i.title, desc: i.title } }); var key = request.term; datamap = datamap.filter(function(i) { if(i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0){ document.getElementById("create").style.visibility = 'hidden'; document.getElementById("import").style.visibility = 'visible'; return i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0; }; }); response(datamap); }, minLength: 1, delay: 100 });
 <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> <input type="text" id="search-deal" /> <button id="create" type="submit" class="btn btn-primary">Créer une affaire</button> <button id="import" type="submit" style="visibility:hidden" class="btn btn-primary">Importer</button>

El problema aquí es que cuando escribo "p", aparece el botón de importación y quiero que aparezca solo cuando hago clic en autocompletar. El segundo problema, es el botón crear nunca volver si el valor está vacío o poner otro valor

¿Alguien puede ayudarme?

about 4 years ago · Santiago Gelvez
1 Respuestas
Responde la pregunta

0

Entiendo por el fragmento compartido que está utilizando jquery ui autocomplete . Sugeriría seguir los cambios/actualizaciones de su código

  1. Para cambiar la visualización del botón al seleccionar el elemento de autocompletar, utilice el evento de select . https://api.jqueryui.com/autocomplete/#event-select
  2. Siempre que el usuario escriba algo, oculte el botón de importación. Mostrarlo solo cuando se selecciona un elemento.
  3. Para manejar el caso de entrada vacío, use el evento oninput .

He realizado los siguientes cambios en el código que compartiste

  1. Se agregó una nueva función para manejar el cambio de botón
  2. Oculte el botón de importación de la propiedad de source , es decir, cuando el usuario escribe alguna entrada y también cuando el cuadro de entrada está en blanco
  3. Mostrar el botón de importación cuando el usuario selecciona una opción de autocompletar

Enlace de código de trabajo: https://plnkr.co/edit/PgzUuOADhIqk9zbl?preview

Espero que esto resuelva tu problema.

about 4 years ago · Santiago Gelvez Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda