반응형
Twitter의 typeahead.js 제안은 스타일이 지정되지 않았습니다 (테두리, 투명 배경 등 없음).
트위터의 typeahead.js 0.9.3을 사용 하고 있으며 내 제안이 전혀 스타일이없는 것 같습니다.
나는 이것을 얻는다 :
이와 같은 대신 : ( 예제 페이지 에서 가져온 )
JavaScript를 사용하여 자동 완성 :
$('.search-typeahead').typeahead({
name: 'videos',
remote: {
url: '/api/v1/internal/videos/typeahead?text=%QUERY'
}
});
HTML 입력 요소 :
<input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/>
추가 사항 :
내가 일하고있는 사이트에는 jQuery 1.10.1이 있으며 트위터 부트 스트랩을 사용하지 않습니다. 내가 작성하지 않았고 방해하는 것에 익숙하지 않은 CSS가 많이 있지만 플러그인은 자체 스타일을 추가하는 것 같습니다 (첨부 된 .css 파일이 없음) 이론적으로 그것을 무시해서는 안됩니다 ? 내 스타일이 작동하는 이유가 혼란 스럽지만 플러그인으로 추가 된 스타일이 작동하지 않아 투명한 배경, 테두리 없음 등의 제안이 발생합니다.
이제 내가 볼 수 있는 문서를 살펴보십시오.
기본적으로 typeahead.js가 만든 드롭 다운 메뉴는보기에 좋지 않으며 웹 페이지 테마에 맞도록 스타일을 지정해야합니다.
따라서 내 솔루션은 복제하려는 예제에서 스타일을 복사하는 것이 었습니다.
.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
border-radius: 8px;
outline: none;
}
.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999;
}
.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
따라서 다음 스타일로이 모양과 느낌을 얻을 수 있습니다. 공식 Typeahead 예제 웹 사이트에서 추출한 CSS를 기반으로합니다.
CSS :
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-menu { /* used to be tt-dropdown-menu in older versions */
width: 422px;
margin-top: 4px;
padding: 4px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
line-height: 24px;
}
.tt-suggestion.tt-cursor,.tt-suggestion:hover {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
이것은 입력에 form-control클래스 가 있다고 가정합니다 . 내 예에서는 다음과 같습니다.
<input class="typeahead form-control" type="text" placeholder="States of USA">
https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/typeaheadjs.css
다른 것들은 좋아 보이지 않았습니다. 이것은 부트 스트랩과 가장 비슷합니다.
Typeahead가 클래스 이름 중 일부를 변경했으며 위의 예가 잘못되었습니다.
예를 들어 :
- 사용 하는 대신
.tt-suggestion.tt-is-under-cursor.tt-suggestion:hover - 대신
.tt-dropdown-menu, 사용.tt-menu
예제 페이지 에서 스타일을 빌리려면 여기 에서 스타일 시트를 볼 수 있습니다 .
.typeahead,
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}
.typeahead {
background-color: #fff;
}
.typeahead:focus {
border: 2px solid #0097cf;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-menu {
width: 422px;
margin: 12px 0;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion:hover {
cursor: pointer;
color: #fff;
background-color: #0097cf;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
스택 스 니펫의 데모는 다음과 같습니다.
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(states)
});.typeahead,
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}
.typeahead {
background-color: #fff;
}
.typeahead:focus {
border: 2px solid #0097cf;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-menu {
width: 422px;
margin: 12px 0;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion:hover {
cursor: pointer;
color: #fff;
background-color: #0097cf;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.js"></script>
<div class="container" >
<input class="typeahead form-control" type="text" placeholder="States of USA" />
</div>이것은 나를 위해 작동하는 코드입니다.
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.tt-hint {
display: block;
width: 100%;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #999;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #dfdfdf;
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
BS3이 포함 된 환경이 적기 때문에 Zugwalt CSS 코드 (더 읽기 쉬운 계층 구조로 배치)를 가져 와서 bs3의 드롭 다운 메뉴에서 스타일로 채 웠습니다. 그것은 단순히 (맞춤형) 변수를 따르는 것입니다.
.twitter-typeahead {
display: block;
width: 100%; //BS 3 needs this to inherit this for children
.tt-query,
.tt-hint {
margin-bottom: 0;
}
.tt-dropdown-menu {
z-index: @zindex-dropdown;
min-width: 326px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
font-size: @font-size-base;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0, 0, 0, .175));
background-clip: padding-box;
.tt-suggestions {
.tt-suggestion {
padding: 3px 12px;
font-weight: normal;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
.tt-suggestion.tt-cursor {
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
}
.tt-suggestion p {
margin: 0;
}
}
}
}
다음 scss은 부트 스트랩 변수 / 선언에 최대한 의존 하는 버전입니다. 불행히도 중첩 된 선택기를 sass로 확장 할 수는 없습니다. 그렇지 않으면 더 작습니다.
@mixin typeahead-active() {
// mimics @extend .dropdown-menu > .active > a;
color: $dropdown-link-active-color;
text-decoration: none;
outline: 0;
background-color: $dropdown-link-active-bg;
}
//https://github.com/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names
span.twitter-typeahead {
// this is the suggested matches dropdown
.tt-menu {
@extend .dropdown-menu;
}
.tt-hint {
color: #999
}
// Added to suggestion elements.
.tt-suggestion {
// mimic .dropdown-menu > li > a
padding: 3px 20px;
line-height: $line-height-base;
// Added to suggestion element when menu cursor moves to said suggestion.
&.tt-cursor {
@include typeahead-active;
}
// Hover/focus on suggestion
&:hover,
&:focus {
@include typeahead-active;
}
p {
margin: 0;
}
}
.input-group & {
display: block !important;
.tt-dropdown-menu {
top: 32px !important;
}
}
.input-group.input-group-lg & {
.tt-dropdown-menu {
top: 44px !important;
}
}
.input-group.input-group-sm & {
.tt-dropdown-menu {
top: 28px !important;
}
}
}
Bootstrap 4를 사용하는 경우 다음을 수행하면 충분합니다.
span.twitter-typeahead
width: 100%
.tt-input
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
.tt-menu
@extend .list-group
box-shadow: 0 5px 10px rgba(0,0,0,.2)
width: 100%
.tt-suggestion
@extend .list-group-item
.tt-selectable
@extend .list-group-item-action
내 특별한 경우에는 절대 위치 결정이 해결되었습니다. 제안 목록 (tt-menu)이 열렸을 때 상대 위치 지정이 다른 부트 스트랩 요소를 아래로 밀었습니다.
.tt-menu {
z-index: 2147483647;
position: absolute;
}
위의 답변 https://stackoverflow.com/a/26934329/1225421에 이것을 추가 할 수 있습니다
반응형
'Programing' 카테고리의 다른 글
| 'xmlns'및 'version'과 같은 SVG 매개 변수가 필요합니까? (0) | 2020.05.20 |
|---|---|
| SQL Server에서 Null 아님 및 비어 있지 않은 문자열을 확인하는 방법은 무엇입니까? (0) | 2020.05.20 |
| 여러 개의 문자열을 다른 여러 개의 문자열로 교체 (0) | 2020.05.20 |
| PEP8을 준수하고 E501을 방지하는 매우 긴 문자열을 작성하는 방법 (0) | 2020.05.20 |
| CSS를 사용하여 HTML 요소를 컨테이너를 기준으로 배치 (0) | 2020.05.20 |