자동 태그 자동 완성이 SoundCloud와 비슷합니까?

Question

Node.Js 앱에 동일한 태그 자동 인식 시스템을 구현하고 싶습니다. 사용자가 #word1 word2을 입력하면 이는 하나의 태그가 아니라 두 단어로 된 하나의 태그로 인식됩니다.

나는 jquery.textcomplete과 jquery.taghandler을 알고 있지만 단 한 단어의 태그 만 할 수 있습니다.

당신이 날 그렇게 도움이 될 어떤 라이브러리를 알고 계십니까 : 그리고 사운드 클라우드에 같은 문구이다 태그를 인식 할 수있는 시스템이 필요하십니까?

감사합니다.

Answer 1

여기가 시작점 일 수 있습니다. 그냥 jQuery를 사용합니다.

당신은 등 자동 완성, 검증, 보도 태그를 추가 입력

를 추가해야합니다.

HTML

<div class="form-group"> 
    <label for="exampleInputTags">Tags</label> 
    <input class="form-control" id="exampleInputTags" placeholder="Enter tags"> 
</div> 
<div id="tags"></div>  

JS

var tag = ''; 
$("#exampleInputTags").keyup(function (e) { 
    if (e.keyCode == 13) { 
     tag = '#' + $("#exampleInputTags").val(); 
     $("#tags").append(tag + '<br/>'); 
     $("#exampleInputTags").val(''); 
    } 
}); 

http://jsfiddle.net/iambnz/b7gju2c1/

편집 :

나는 자동 완성에 대한 몇 가지 논리를 추가 한

.RegEx 패턴을 테스트하고 변경해야합니다. 지금까지 이것을 입력 컨텍스트에 추가하는 방법을 모릅니다.

JS

var tag = ''; 
var str = 'JavaScript'; 

$("#exampleInputTags").keyup(function (e) { 
    var re = $("#exampleInputTags").val(); 
    console.log(re); 
    if (re != '') 
    { 
    testinput(re, str); 
    } 
    else if (re == '') 
    { 
    $("#suggestions").text(''); 
    } 
}); 

function testinput(re, str) { 
    if (str.search(re) != -1) { 
    $("#suggestions").text(str); 
    } 
} 

$("#exampleInputTags").keyup(function (e) { 
    if (e.keyCode == 13) { 
     tag = '#' + $("#exampleInputTags").val(); 
     $("#tags").append(tag + '<br/>'); 
     $("#exampleInputTags").val(''); 
    } 
}); 

HTML

<div class="form-group"> 
    <label for="exampleInputTags">Tags</label> 
    <input class="form-control" id="exampleInputTags" placeholder="Enter tags"> 
    </div>  
    <div id="tags"></div>  
     <br/><br/> 
    <div id="suggestions"></div> 

http://jsfiddle.net/iambnz/yye1b4ye/

그 모든 부트 스트랩에서의 추가 선행 입력상의를 살펴, 사용자의 요구에 맞지 않을 경우.

http://getbootstrap.com/2.3.2/javascript.html#typeahead