Hashtag client side implementation using jquery & javascript

Question

#input {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

<div id="input" placeholder="testing" contenteditable>listening music #music</div>

I'm implementing hashtag feature (ex:- #music, #dance).

if user enter '#' character I want to hit search Api.

for Example: user updating status "listening music #music #dance let's rock"

here "listening music, let's rock" is normal text and "#music", "#dance" are hashtag.

whenever user enters "#m" after "listening music", i need to hit api like "/search?q=m"

var searchData = ["music", "mango", "marks", "moon"]

user able to select one of the suggestion and space will come after hashtag automatically.

whenever user enters "#d" after "#music ", i need to hit api like "/search?q=d"

var searchData = ["dance", "danger", "dad"]

user able to select one of the suggestion and space will come after hashtag automatically.

"let's rock" is normal text.

differentiating color of "hashtag" and search only when user enters "#"

if you see, i searched for '#m', if I selected "music", in text box value is coming like "#mmusic" ("#m"+"music") and i want to highlight the hashtag word. — devendra tata, Dec 26 '16 at 13:46
if you see twitter, i need the same functionality like "Tweet box" — devendra tata, Dec 26 '16 at 13:54

kemal akoğlu · Answer 1 · 2016-12-26T14:03:15.320

1

I think this works for you

var inputData = "listening music #music #dance let's rock";
var arrayData = inputData.split(" ");

arrayData.forEach(function(entry) {
     if(entry.startsWith(("#music") || ("#etc"))){
     // hit your api
     }
});

edited Dec 26 '16 at 14:03

answered Dec 26 '16 at 13:25

kemal akoğlu

182
13

user entered "listening music " and user entered "#m", "#mu" or etc, once user selected any of the suggestion i want "#m" or "#mu" or etc become "#selectedItem", for me it's coming like "#mselectedItem" or "#muselectedItem" and that tag should be in different color or any other (css). – devendra tata Dec 26 '16 at 13:51

rabelloo · Answer 2 · 2016-12-27T14:58:55.160

1

You could bind the keyup event to your input to check for hashtag starting words. When a match is found, you call your AJAX. Like so:

var ajax;

$('#input').keyup(function() {

    var tags = $(this).val().split(' ');
    var lastTag = tags.pop();

    if (/#\S+\b/.test(lastTag)) {
        // abort previous ajax if still running
        if (ajax && ajax.abort && ajax.readyState !== 4)
            ajax.abort();

        // hit your search api
        ajax = $.getJson('/search', { q: lastTag })
               .done(function (data) {
                   // manage your response data here
                   // show suggestions and handle picking one
               });
    }
});

EDIT: Completely redone logic, much simpler and more compact

edited Dec 27 '16 at 14:58

answered Dec 26 '16 at 15:12

rabelloo

376
2
5

Hi rabelloo, Thanks for your reply, I have tried your code but always "ajax" is coming undefined and first-time value of "currentHashtagIndex" is always coming "-1". Can you recheck your script and update it. – devendra tata Dec 27 '16 at 06:56
Yea, my mistake, refactored the code while writing and left the variables inside the `keypress` event scope. The ajax is always undefined because the code never managed to get to $.getJson thanks to the previous error. Please try the updated code – rabelloo Dec 27 '16 at 10:57
I also just realized you do not need a `searching` variable, you can use `currentHashtagIndex`. Updated code to reflect that – rabelloo Dec 27 '16 at 11:01
Hi Rabelloo, Thank you, I have checked the updated code as well, the 'index' and 'query parameter' values are not correct. you can check this link [https://jsfiddle.net/5a9c4f87/2/](https://jsfiddle.net/5a9c4f87/2/). – devendra tata Dec 27 '16 at 11:42
[https://jsfiddle.net/DevendraTata/5a9c4f87/5/](https://jsfiddle.net/DevendraTata/5a9c4f87/5/) I updated the code here, Ignore the previous comment link. the 'index' and 'query parameter' values are not correct. – devendra tata Dec 27 '16 at 11:50
Thanks, @rabello. I'm implementing the feature same like "twitter box". here is the sample code, but still I'm facing few issues, you can check here. [http://jsfiddle.net/DevendraTata/4xyo4zfa/2/](http://jsfiddle.net/DevendraTata/4xyo4zfa/2/) – devendra tata Dec 28 '16 at 06:07
What are the issues you're facing? Couldn't find one with the jsfiddle. – rabelloo Dec 28 '16 at 10:16
In that above mentioned link, i'm using content editable div element, cursor is jumping one position to other position. if i delete all the text inside the element, the div content editable stops working. issue 1:(div content editable stops working) steps1: type somingthing inside element. stept2: delete all the text you entered then you will find the issue. issue 2: (cursor jumping one position to other position) step1: type any link www.example.com, you will face this issue. – devendra tata Dec 28 '16 at 10:50
Unfortunately those issues have nothing to do with the original question. Please open another question for them – rabelloo Dec 28 '16 at 11:00

Hashtag client side implementation using jquery & javascript

2 Answers2