twitter typeahead.js - 클릭 가능한 글꼴 추가 결과 목록에 멋진 아이콘

Question

clickable font awesome 아이콘을 추가하여 typeahead/bloodhound의 결과 목록 표시를 사용자 정의하고 싶습니다. 유스 케이스는 사용자가 결과 항목 중 하나를 선택하는 대신 편집을 시작할 수 있도록하는 것입니다.

이것이 가능합니까?

나는이 제안 템플릿을 추가 한 :

suggestion: function(el){ 
    return '<div><strong>' + el.value + '</strong>' + 
    '<span style=display:inline-block; float:right;"> 
    <a href="test.php"><i class="fa fa-minus-circle"></i></a><span></div>'}, 
} 

이는 아이콘을 표시하고 클릭 할 수 있지만 아이콘이 바로 옆에 el.value에 표시됩니다.

Answer 1

대답 대신 인라인 스타일을 사용하는 새로운 클래스 정의에 추가 할 것입니다 :

.tt-suggestion span { 
     display: : inline-block; 
     float: right; 
    } 

을하고 아이콘이 제안 행의 마지막에 정렬, 올바르게 표시됩니다.