Применить стиль на вставке в DIV

Question

Я строй поиска по тэгам поля ввода, как показано здесь:

http://jsfiddle.net/Newtt/7nUAf/

Простите ужасный стиль, как это только небольшой компонент большого приложения и я вы просто добавили стили, необходимые для показа моей проблемы.

окно поиска является div, который имеет это текст, вставленный с помощью Jquery следующим образом:

$(document).ready(function() { 
$('.search-box').click(function() { 
    $('.search-options').toggle(); 

}); 

$('.options').click(function() { 

    var d = $('.search-box').html(); 
    console.log(d); 
    var c = $(this).html(); 
    console.log(c); 
    if (d != '') { 
     $('.search-box').html(d + ', ' + c); 
    } else { 
     $('.search-box').html(c); 
    } 
    $('.search-options').hide(); 
}); 
$('#reset').click(function() { 
    $('.search-box').html(''); 
}); 
}); 

где .search-box является входным ДИВ, .options являются интерактивными опциями из выпадающего списка search-options.

В настоящее время текст каждого варианта вставляется в поле поиска. Мне нужно, чтобы это динамически отображалось при входе в окно поиска.

Я пытался что-то на линии:

$('<span>').addClass('tag').append(
        $('<span>').text(value).append('&nbsp;&nbsp;'), 
        $('<a>', { 
         href : '#', 
         title : 'Removing tag', 
         text : 'x' 
        }); 

где tag класс определяется в таблице стилей, чтобы стиль элемента выглядеть как тег, , но это не работает вообще. Может ли кто-нибудь помочь мне с тем, как добиться стиля ввода текста, чтобы он выглядел как тег, например, из ноутбуков Evernote?

Спасибо!

Answer 1

Я адаптировал вашу скрипку. Просто оберните c в пролете с классом (как вы пытались сделать во второй части вашего сообщения) и примените стили в css. Я только что сделал фон красным, но его должно быть достаточно легко сделать, чтобы он выглядел как тег, подобный те, что находятся в раскрывающемся списке.

http://jsfiddle.net/7nUAf/1/

JS:

$('.options').click(function() { 
    var d = $('.search-box').html(); 
    var c = $(this).html(); 
    $('.search-box').append('<span class="tag">'+c +'</span>'); 
    $('.search-options').hide(); 
}); 

CSS:

.tag { 
    background: red; 
} 

Answer 2

Для чего вы хотите сделать - есть много отличных плагинов, которые уже доступны, что обеспечивает гораздо более «красивую» функциональность и с гораздо меньшим количеством работы с вашей стороны. Некоторые из них уже предложены в комментариях - я бы предложил рассмотреть возможность использования "chosen". Синтаксис удивительно прост. Просто создайте поле выбора следующим образом:

<select id="test" multiple> 
    <option>pdf</option> 
    <option>document</option> 
</select> 

Затем в документе готовой функции вам просто нужно вызвать выбранный плагин:

$(document).ready(function() { 
    $('#test').chosen({width: "80%"}); 
}); 

я соединял пример, который делает это на JSFiddle здесь: http://jsfiddle.net/7nUAf/3/. Как только вы дойдете до того, что у вас есть работа, вы можете легко стилизовать элементы, проверив, какие элементы выбраны. Например, селектор «li.search-choice» позволит вам стилизовать выбранные элементы.

В целом - даже если вам не нравится этот конкретный подключаемый модуль, всегда используйте поиск существующих элементов, которые выполняют то, что вы ищете. В случае, если они не идеальны, вы всегда можете улучшить их и обеспечить понимание для сообщества в целом. Таким образом, каждый учится вместе.

Удачи!