Q. 자동완성기능 textarea에 <a>태그적용
AJAX를 이용해 자동완성검색기능을 구현하였습니다 그러나 제가원하는 대로 되지않아 이렇게 질문을 올립니다.
페이스북 태그처럼 구현하고있는데 자동완성검색어를 클릭시 textarea태그에 <a>태그가 걸어져서 나오는
즉, 안녕하세요 admin 처럼 나오게하고싶습니다
textarea 태그에 아무리 찾아보아도 안에 태그를 적용할수없다는 지식만나옵니다 정말 textarea 태그안에 <a> 태그를 적용할순없나요
꼭 완성하고싶은데..다른방법이있다면 어떤말법이있을까요 div태그 도 사용해보았지만 글자를 입력할수있는 창이 나오지않아 div 태그도 못쓰고..
A.DIV 태그에 contenteditable 속성을 사용 하세요.
학인하신 것처럼 textarea 에 태그를 입력해봐도 <a>링크</a> 태그가 그대로 보이며, 당연히 이 링크가 동작 하지도 않습니다.
답변을 먼저 드리면, DIV 같은 일반 태그에 contenteditable 속성을 설정 하면 가능합니다.
contenteditable 속성
태그에 contenteditable=”true” 라고 속성을 설정 하면 해당 엘리먼트의 내용을 편집할 수 있게 됩니다.
|
1 |
<div class="input" contenteditable="true" id="input">여기를 수정 해보세요 ...</div> |
contenteditable 엘리먼트에 HTML 추가
그리고, textarea 에서는 불가능하지만 contenteditable=”true” 로된 엘리먼트에서는 HTML 태그도 사용 가능하며 추가된 HTML 엘리먼트의 내용도 수정 가능 합니다.
|
1 |
<div contenteditable="true">여기에 <a href="#">링크</a> 추가</div> |
div 에 자동 완성 기능 추가
질문을 보면 jquery-ui 를 이용해 자동 완성을 구현한 것 같은데, div 에도 자동완성 기능을 붙일 수 있습니다.
시도해 봤는데 안된다면 jquery-ui가 지원하지 않는 거니까 다른 라이브러리를 찾아보셔도 될 것 같습니다.
실제로 페이스북의 답글 다는 영역을 확인해보면 아래 처럼 div에 contenteditable=”true” 를 사용하고 있습니다.
그리고, 이 답변을 준비 하면서 실제로 가능한지 직접 div에 자동 완성 기능을 붙여 봤습니다. 데모 보기
추가된 링크 클릭 가능하게 하기
위에서 contenteditable=”true” 엘리먼트에 링크를 추가했는데요, 클릭 해보면 링크 문구를 수정 할 수 있게 커서가 위치하지만, 링크가 동작하지는 않습니다. 만약, 추가된 링크를 동작 하게 하려면 아래 처럼 <a> 태그에는 contenteditable=”false” 를 설정 합니다.
|
1 |
<div contenteditable="true" >동작하는 <a href="#" contenteditable="false">링크</a> 추가</div> |
추가된 링크는 클릭 할 수는 있지만 수정 할 수는 없습니다. 이게 질문 의도에 가장 부합하는 방식일 것 같네요.
건투를 빕니다.
참고
데모를 만들어 봤습니다.
자동 완성 기능을 직접 만들어 보느라 소스가 길어졌습니다.
시연 영상 입니다.