Agregar / eliminar elementos con javascript

Tengo una lista de elementos que se deben filtrar conforme se va escribiendo en un campo de texto, en caso de que no aparezca en la lista filtrada que los pueda añadir, y en caso que si aparezca añadirlo por medio de doble click,

Ya tengo la parte del filtro, no ce como solucionar lo siguiente

Al darle doble click se deben crear como elementos aparte que tenga la opción de eliminar después de haberlas agregado.

La cosa es que no se como agregarlos, y eliminarlos con javascript, supongo que quedaran dentro de un campo de texto o algo porque después debo recuperar los seleccionados con php así mismo con un id asignado

2 Respuestas

Respuesta
1

¿Tienes un ejemplo con el cual se pueda observar de que manera lo estas implementando?

<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<h2>Demo</h2>
<div id="demo-container">
<fieldset>
<legend><label for="livefilter-input">Type anything.</label></legend>
<input id="livefilter-input" type="text" value="">
<ul id="livefilter-list">
<li><a>cool</a></li>
<li><a>nice</a></li>
<li><a>interesting</a></li>
<li><a>javascript</a></li>
<li><a>css</a></li>
<li><a>html</a></li>
<li><a>script</a></li>
<li><a>international</a></li>
</ul>
</fieldset>
</div>

tengo eso me baso en un script para el filtro , la lista la cargare desde una base de datos, son como 2000 elementos de la lista, hasta ahí el filtro funciona bien y todo, lo que no ce es como agregar los elementos

dado armare la lista con phph no abra problema en agregar a cada uno el elemento onClick=*****, este pedazo es el que no ce como hacer

lo que necesito es armar una lista, o lo que sea con los elementos seleccionados y que se muestre como en la imagen que puse anteriormente, con la posibilidad de eliminarlos si lo inserte mal

Intenta con esto (he incluido las librerías en el head de manera intencional)

<html>
<head>
<title>Paginas</title>
<script src="./jquery.js"></script>
<script src="./liveFilter.js"></script>
<script>
$(document).ready(function(){
$("#btn-agregar").click(function(){
if($("#livefilter-input").val()!=""){
campo="<div>"+$("#livefilter-input").val()+"<input type='hidden' value='selección[]' value='"+$("#livefilter-input").val()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
}
});
$('#seleccionados').on('click', '.eliminador', function() {
$(this).parent().remove()
});
});
</script>
</head>
<body>
<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<h2>Demo</h2>
<div id="demo-container">
<fieldset>
<legend><label for="livefilter-input">Type anything.</label></legend>
<input id="livefilter-input" type="text" value="">
<input type='button' id='btn-agregar' value='agregar'>
<ul id="livefilter-list">
<li><a>cool</a></li>
<li><a>nice</a></li>
<li><a>interesting</a></li>
<li><a>javascript</a></li>
<li><a>css</a></li>
<li><a>html</a></li>
<li><a>script</a></li>
<li><a>international</a></li>
</ul>
</fieldset>
</div>
Listado de items seleccionados
<div id="seleccionados">
</div>
</body>
</html>

esto resuelve la parte del campo de texto en caso de lo que se busca no este en la lista

, pero si esta en la lista como seria, es decir la lista debería estar así;

<ul id="livefilter-list">
<li onClick="agregar a seleccionados">cool</li>
<li onClick="agregar a seleccionados">nice</li>
</ul>

o así

<ul id="livefilter-list">
<li>cool<input type"button" onClick="agregar a seleccionados"></li>
<li>nice<input type"button" onClick="agregar a seleccionados"></li>
</ul>

es decir que cumpla la misma función del botón superior de agregar pero para cada uno de los elementos de la lista.

Probemos con esta solución previa a ver si vamos encaminados:

<html>
<head>
<title>Paginas</title>
<script src="./jquery.js"></script>
<script src="./liveFilter.js"></script>
<script>
$(document).ready(function(){
$("#btn-agregar").click(function(){
if($("#livefilter-input").val()!=""){
if($("#livefilter-list > li:visible").length!=0){
$("#livefilter-list > li:visible").each(function(){
//alert($(this).children("a").text());
campo="<div>"+$(this).children("a").text()+"<input type='hidden' value='seleccion[]' value='"+$(this).children("a").text()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
});
}else{
campo="<div>"+$("#livefilter-input").val()+"<input type='hidden' value='seleccion[]' value='"+$("#livefilter-input").val()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
}
}
});
$('#seleccionados').on('click', '.eliminador', function() {
$(this).parent().remove()
});
});
</script>
</head>
<body>
<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<h2>Demo</h2>
<div id="demo-container">
<fieldset>
<legend><label for="livefilter-input">Type anything.</label></legend>
<input id="livefilter-input" type="text" value="">
<input type='button' id='btn-agregar' value='agregar'>
<ul id="livefilter-list">
<li><a>cool</a></li>
<li><a>nice</a></li>
<li><a>interesting</a></li>
<li><a>javascript</a></li>
<li><a>css</a></li>
<li><a>html</a></li>
<li><a>script</a></li>
<li><a>international</a></li>
</ul>
</fieldset>
</div>
Listado de items seleccionados
<div id="seleccionados">
</div>
</body>
</html>

tal como lo planteas es por ejemplo al escribir la letra c, agrega todas las conincidecias, y no va por ahí, la idea es que pueda llamar a la funciona agregar desde cada uno de los elementos de al lista es decir

-item 1 (botón agregar)

-item 2 (botón agregar)

así , que cada item tenga el botón de agregarse , o en su defecto que al darle click se agregue pero desde la lista sin necesidad de darle al botón superior agregar, ya si no hubo coincidencias, agregara el texto del campo superior

Ok, veamos que tal es esta opción

<html>
<head>
<title>Paginas</title>
<script src="./jquery.js"></script>
<script src="./liveFilter.js"></script>
<script>
$(document).ready(function(){
$("#btn-agregar").click(function(){
if($("#livefilter-input").val()!=""){
if($("#livefilter-list > li:visible").length!=0){
$("#livefilter-list > li:visible").each(function(){
//alert($(this).children("a").text());
campo="<div>"+$(this).children("a").text()+"<input type='hidden' value='seleccion[]' value='"+$(this).children("a").text()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
});
}else{
campo="<div>"+$("#livefilter-input").val()+"<input type='hidden' value='seleccion[]' value='"+$("#livefilter-input").val()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
}
}
});
$('#seleccionados').on('click', '.eliminador', function() {
$(this).parent().remove()
});
$("#livefilter-input").keyup(function(){
if($("#livefilter-list > li:visible").length==0){
$("#btn-agregar").fadeIn("slow");
}else{
$("#btn-agregar").fadeOut("slow");
}
});
});
</script>
</head>
<body>
<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<h2>Demo</h2>
<div id="demo-container">
<fieldset>
<legend><label for="livefilter-input">Type anything.</label></legend>
<input id="livefilter-input" type="text" value="">
<input type='button' id='btn-agregar' value='Agregar Texto' style="display: none;">
<ul id="livefilter-list">
<li><a>cool</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>nice</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>interesting</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>javascript</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>css</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>html</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>script</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>international</a> <input type='button' value='Agregar' class='agregador'></li>
</ul>
</fieldset>
</div>
Listado de items seleccionados
<div id="seleccionados">
</div>
</body>
</html>

Olvide un detalle:

Agrega este bloque dentro del método ready en el header

$('#livefilter-list').on('click', '.agregador', function() {
campo="<div>"+$(this).prev().text()+"<input type='hidden' value='seleccion[]' value='"+$(this).prev().text()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
});

No ce, le doy clic al botón agregar y no hace nada

No ce, le doy clic al botón agregar y no hace nada, la idea que permanezcan las dos opciones

es decir digite una palabra que no estaba, entonces sigue el botón agregar del campo texto y le adiciono normal

la otra es que escribí parcialmente una palabra y ahí por ejemplo 5 palabras similares en la lista, ya direrctamente puedo darle click al botón agregar de cada uno de los elementos de la lista y agregarlo sin que desaparezca el botno supoerior de agregar

Entiendo, entonces la solución sería esta:

<html>
<head>
<title>Paginas</title>
<script src="./jquery.js"></script>
<script src="./liveFilter.js"></script>
<script>
$(document).ready(function(){
$("#btn-agregar").click(function(){
campo="<div>"+$("#livefilter-input").val()+"<input type='hidden' value='selección[]' value='"+$("#livefilter-input").val()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
});
$('#seleccionados').on('click', '.eliminador', function() {
$(this).parent().remove()
});
$('#livefilter-list').on('click', '.agregador', function() {
campo="<div>"+$(this).prev().text()+"<input type='hidden' value='selección[]' value='"+$(this).prev().text()+"'>";
campo+="<input type='button' value='Eliminar' class='eliminador'></div>";
$("#seleccionados").append(campo);
});
});
</script>
</head>
<body>
<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<h2>Demo</h2>
<div id="demo-container">
<fieldset>
<legend><label for="livefilter-input">Type anything.</label></legend>
<input id="livefilter-input" type="text" value="">
<input type='button' id='btn-agregar' value='Agregar Texto'>
<ul id="livefilter-list">
<li><a>cool</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>nice</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>interesting</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>javascript</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>css</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>html</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>script</a> <input type='button' value='Agregar' class='agregador'></li>
<li><a>international</a> <input type='button' value='Agregar' class='agregador'></li>
</ul>
</fieldset>
</div>
Listado de items seleccionados
<div id="seleccionados">
</div>
</body>
</html>

Respuesta

Gosto muito de apostar no desporto porque é muito rentável e pode ganhar bom dinheiro se assistir regularmente a eventos desportivos e analisar o jogo. Gosto muito do facto de a casa de apostas mostbet oferecer sempre boas probabilidades e é possível encontrar muitas opções lucrativas para jogar.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Adicionar atributos a un campo dependiendo del radiobutton seleccionado

Tengo dos radio button para elegir que campo debería ser obligatorio Dependiendo del radio button que se escoja un campo pasara a ser obligatorio y el otro seguirá sin serlo
1 respuesta

Agregar valores a un campo texto desde un campo select

Les cuento que estoy utilizando un script al cual le estoy mejorando un poco el inicio de sesión para hacerlo más fácil para mis usuarios. Mi intención es que el usuario pueda escribir la primera parte de su correo, la cual es numérica y que la...
1 respuesta

Filtrar desde un Text un Select Multiple

En un formulario que tiene un Text y un SelectMultiple, lo que Necesito es que cuando escriba algún carácter en el text, el select múltiple se filtre. Ejemplo: En un listado con los países en un select múltiple, al digitar "c" en el Text, que filtre...
2 respuestas

Agregar filas a una tabla dinámicamente

Debo agregar filas a una tabla por medio de javascript sin que me refresque la página La idea es que después me pueda llevar la tablo tal ves por un array o algo parecido La idea seria esta, no puedo hacerlo por meidode un form porque ya me encuentro...
1 respuesta

Como recoger valores de un Json con ajax

Quiero recoger los valores de latitud, longitud desde un json generado en php y almacenarlos en las variables x, y en mi html. Pero no sé como hacer esto. Soy nuevo y ando un poco perdido. <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"...
1 respuesta

Galeria de imagenes html con marquee

Soy nuevo en la creación de páginas web, y estoy haciendo una personal. Mi problema surge cuando quiero crear una galería de imágenes, para la que estoy utilizando marquee. Para mostrar las imágenes en menor tamaño y al hacer click que se vean más...
1 respuesta

Deshabilitar validación de elementos input con css

Amig@s. Tengo un formulario donde está habilitada la validación de todos los elementos input. ¿Cómo podría deshabilitar la validación de algunos de esos elementos inputs del formulario que no quiero que se validen? ¿Cómo lo hago en el CSS? ¿Quizás es...
1 respuesta

Pasar variable php a una ventana modal

Agradecería mucho de su ayuda con el siguiente problema tengo una tabla que se llena con una base de datos según sea la selección en el combobox por ejemplo si selecciono dentista me mostrara todos los dentistas dentro de mi base de datos al final...
1 respuesta

¿Contador de clicks como un me gusta?

: : ¿Cómo podría hacer un contador (botón) de clicks como un botón de me gusta?, ejemplo: yo creo un botón la cual lo clickeo y mostrará un numero a lado, fui el primero en dar el click y luego aparece un numero la cual es el 1 por ser el primero y...
1 respuesta

Como puedo eliminar varios registros a la ves con un boton

Que onda aquí de nuevo mi pregunta es como puedo eliminar varios registros a la ves con un botón que me elimine varios registros en mi base de datos ese botón quiero que este en la misma pagina y cuando le de eliminar ahi mismo me redericcione porque...
1 respuesta