사업부

Question

내가 태그 입력 상자에 의한 검색을 짓고 있어요로 삽입에 스타일을 적용 방금 내 문제를 표시하는 데 필요한 스타일을 추가했습니다.

내 검색 상자는 텍스트 다음과 같이 jQuery를 사용하여 삽입 된 것 가지고 div입니다 :

.search-box가 입력 사업부입니다

$(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(''); 
}); 
}); 

, .options 상자 search-options 드롭 다운 메뉴에서 클릭 가능한 옵션입니다.

현재 각 옵션의 텍스트는 검색 창 div에 삽입됩니다. 검색 상자에 들어가는 동안 동적으로 스타일을 지정해야합니다. tag 클래스는 요소의 스타일을 스타일 시트에 정의되어

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

가 태그, 처럼 보일 수 있지만 전혀 작동하지 않습니다

나는의 라인에 뭔가를 시도했다. 누군가가 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> 

그런 다음 문서 준비 기능에 단순히 선택 플러그인을 호출해야합니다 : http://jsfiddle.net/7nUAf/3/ :

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

내가 함께 여기 JSFiddle에이 작업을 수행하는 예를 넣습니다. 일단 작업을 시작하면 원하는 요소를 선택하여 요소의 스타일을 쉽게 지정할 수 있습니다. 예를 들어 "li.search-choice"선택기를 사용하면 선택한 항목의 스타일을 지정할 수 있습니다.

일반적으로 -이 특정 플러그인이 마음에 들지 않더라도 항상 찾고있는 항목을 검색해보십시오. 이들이 완벽하지 않은 경우 항상 개선하고 커뮤니티 전체에 통찰력을 제공 할 수 있습니다. 그런 식으로 모두가 함께 배웁니다.

행운을 빈다.