Фильтрация в одном входе нескольких значений с опцией удаления как x

Question

Фильтрация в одном входе нескольких значений с опцией удаления как x

0

Я сержант в Интернете, и я не знаю, что искать точно, или нет поддержки для этого типа.

Мне нужно реализовать следующий вход для моей фильтрации в html с js и jquery. Это работает точно так же, как входные теги stackoverflows. После пробела добавьте x в конец.

У кого-нибудь есть идеи, как? Может кто-нибудь снабдить меня некоторыми образцами?

Извините, теперь я понял, что я didint выразил себя достаточно хорошо. Мне не нужна автозаполнение, просто добавьте несколько тегов с возможностью удаления, поскольку x разделяется только пробелом

user2837742 02 окт. 2013, в 11:00

Источник

0

То, что вы ищете, называется autocomplete управления. jQueryUI содержит один из них, хотя для работы с тегами потребуется изменить его. Если вы воспользуетесь этим «автозаполнением тегов» в Google, есть несколько других сторонних плагинов, которые сделают это за вас.
Rory McCrossan 02 окт. 2013, в 08:09

Теги:

javascript

jquery

html

filtering

input

1 ответ

Ещё вопросы

То, что вы ищете, называется autocomplete управления. jQueryUI содержит один из них, хотя для работы с тегами потребуется изменить его. Если вы воспользуетесь этим «автозаполнением тегов» в Google, есть несколько других сторонних плагинов, которые сделают это за вас.

Adam Baranyai · Accepted Answer · 2013-10-02T07-17-00.000Z

HTML:

<div class='container'>
<div class='selectedElements'></div>
<input type='text' id='useToSelect' value='' onkeyup="testForSpace();">
</div>

Jquery:

function testForSpace()
{
    text=$('#useToSelect').val();
    if (text[text.length-1] == ' ') {
        if (text == '') {
            $("#useToSelect").val("");   
        }
    currentSelected=$(".selectedElements").html();
    newSelected="<div class='singleSelectedContainer' onclick='destroyElement(this)' style='float:left;'><div class='singleSelected'><div class='Content'>" + text + "</div><div class='Close'> &nbsp;  x </div><div clear:left;></div></div><div style='float:left; width:7px;'>&nbsp;</div></div>";
    $(".selectedElements").html(currentSelected + newSelected);
    $("#useToSelect").val("");
    }
 }


function destroyElement(elem) {
    $(elem).html('');   
}

После того, как вы напечатаете что-то в поле ввода и нажмите пробел, он генерирует div, содержащий ваш текст, и помещает его влево от входа. Если это то, что вы ищете, и вам нужно больше объяснений, я с радостью объясню вам, как это работает.

function retrieveData() 
{ 
  dataArray=new Array(); 
  $(".singleSelected").each(function() {
    dataArray.push($(this .Content).html());
  });
  return dataArray; //this contains the selected elements 
}

в принципе как то так Спасибо! Любая идея, как я могу отформатировать его, чтобы выглядеть немного плавнее?
также. Могут ли поля быть сохранены внутри ввода? не как дивы
В основном вы должны применить CSS к .singleSelected. Попробуйте придать границам некоторый радиус и светло-серый фон для div с черным цветом шрифта. Также вы можете отформатировать закрывающий X и содержимое отдельно (".singleSelected .Content", ".singleSelected .Close"). Что касается хранения выбранных данных во входных данных, а не в div, я не знаю. Насколько я знаю, вы не можете стилизовать входной контент отдельно. Если вы не знаете, как извлечь выбранные данные, позже из div, я могу помочь вам в этом. Ищите функцию retrieveData в исходном ответе.
Благодарю. Мне удалось получить рабочий пример именно так, как я хочу. хорошего дня.