JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="message">
<p>Resultado:</p>
<div id="console">
<p id="procurando"/>
<p id="completo"/>
</div>
CSS
p{
padding:0;
margin:0;
}
JavaScript
(function($) {
$.fn.hashtag = function(options) {
var settings = $.extend({
searchingValue: function(){},
completeValue: function(){}
}, options);
var Hastag = {
implementationKeyUp: function(){
var inValue, lastPos, lastChar, hashPos, hashValue;
lastPos = this.selectionStart-1;
inValue = $(this).val().slice(0,lastPos+1)
lastChar = inValue[lastPos];
hashPos = inValue.lastIndexOf("#");
hashValue = inValue.slice(hashPos);
if( lastChar == "#"){
$(this).data({"searching": true, "currentHashPos": lastPos});
} else if(lastChar == String.fromCharCode(32) && $(this).data("searching")){ //verifica espaço
$(this).data("searching", false);
settings.completeValue.call(this, hashValue);
} else if($(this).data("searching") && lastChar != String.fromCharCode(32))
settings.searchingValue.call(this, hashValue);
if($(this).data("currentHashPos")>lastPos||this.selectionStart<$(this).data("currentHashPos"))
$(this).data("searching", false);
console.log();
},
implementationKeyDow: function(e){
var keyCode = e.keyCode;
if($(this).data("searching") && keyCode == 35)
return false;
}
};
this.each( function() {
$(this)
.on("keyup",Hastag.implementationKeyUp)
.on("keydown",Hastag.implementationKeyDow)
.data({"searching":false, "currentHashPos":null});
});
}
}(jQuery));
var events = {
searchingValue : function(hashValue){
...