2

I'm using at.js plugin, it works all fine, expect the moment when I use arrow keys up/down when the dropdown is shown. In this moment it focuses second list and the dropdown is hidden.

I know that the problem is that I used JQuery to navigate through list, but is there any way to prevent this?

Thanks in advance!

var li = $('li.test'); var liSelected; $(document).keydown(function(e) { if (e.which === 40) { e.preventDefault(); if (liSelected) { liSelected.removeClass('selected'); next = liSelected.next(); if (next.length > 0) { liSelected = next.addClass('selected'); } else { liSelected = li.eq(0).addClass('selected'); } } else { liSelected = li.eq(0).addClass('selected'); } } else if (e.which === 38) { e.preventDefault(); if (liSelected) { liSelected.removeClass('selected'); next = liSelected.prev(); if (next.length > 0) { liSelected = next.addClass('selected'); } else { // liSelected = li.last().addClass('selected'); } } else { // liSelected = li.last().addClass('selected'); } } $('li.selected .single-line').focus(); }); $('.single-line').atwho({ at: "@", data:['Person1', 'Person2', 'Person3', 'Person4'] })
.atwho-view { position:absolute; top: 0; left: 0; display: none; margin-top: 18px; background: white; color: black; border: 1px solid #DDD; border-radius: 3px; box-shadow: 0 0 5px rgba(0,0,0,0.1); min-width: 120px; z-index: 11110 !important; } .atwho-view .atwho-header { padding: 5px; margin: 5px; cursor: pointer; border-bottom: solid 1px #eaeff1; color: #6f8092; font-size: 11px; font-weight: bold; } .atwho-view .atwho-header .small { color: #6f8092; float: right; padding-top: 2px; margin-right: -5px; font-size: 12px; font-weight: normal; } .atwho-view .atwho-header:hover { cursor: default; } .atwho-view .cur { background: #3366FF; color: white; } .atwho-view .cur small { color: white; } .atwho-view strong { color: #3366FF; } .atwho-view .cur strong { color: white; font:bold; } .atwho-view ul { /* width: 100px; */ list-style:none; padding:0; margin:auto; max-height: 200px; overflow-y: auto; } .atwho-view ul li { display: block; padding: 5px 10px; border-bottom: 1px solid #DDD; cursor: pointer; /* border-top: 1px solid #C8C8C8; */ } .atwho-view small { font-size: smaller; color: #777; font-weight: normal; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Caret.js/0.3.1/jquery.caret.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.0/js/jquery.atwho.min.js"></script> <div id = 'main'> <ul> <li class="test"><div id = 'n1' contenteditable=true class="single-line">Pres @ character</div></li> <li class="test"> <div id = 'n2' contenteditable=true class="single-line">Test</div></li> <li class="test"> <div id = 'n3' contenteditable=true class="single-line"> Content 3</div></li> <li class="test"> <div id = 'n4' contenteditable=true class="single-line"> Content 4</div></li> </ul> </div>

Improve this question
6
  • May i know what is the purpose of at.js ? Commented Jun 22, 2016 at 10:50
  • I don't get why you try to code the arrow behavior... Since the arrows are already usable in this at.js demo. Then, your liSelected is undefined (declared, but undefined). It gets defined by the else statement, wich will always be li.eq(0) (your first li) while adding the class «selected» to it. Commented Jun 22, 2016 at 10:51
  • @LouysPatriceBessette, I need to navigate through list too :( Commented Jun 22, 2016 at 11:09
  • Ok... You want to navigate throught your editable lis... Not throught the at.js dropdown... I finally get it. There may be a way... But it's the dropdown that will not listen to arrows. Commented Jun 22, 2016 at 11:19
  • @LouysPatriceBessette, I want to navigate through both of them :( Commented Jun 22, 2016 at 11:24

2 Answers 2

Reset to default
1

This may help to understant what you code does...
Maybe you tought it was doing something else.
See comments in code.

var li = $('li.test'); var liSelected; $(document).keydown(function(e) { if (e.which === 40) { e.preventDefault(); if (liSelected) { // Undefined on first keydown, Always equals li.eq[0] rest of the time. liSelected.removeClass('selected'); next = liSelected.next(); if (next.length > 0) { // Will NEVER be more than zero since .next selects one element. liSelected = next.addClass('selected'); } else { liSelected = li.eq(0).addClass('selected'); // So you define it to your first li here too. } } else { liSelected = li.eq(0).addClass('selected'); // liSelected is defined here on first keydown only. } // li.eq[0] is you first li, the one with id = 'n1' } else if (e.which === 38) { e.preventDefault(); if (liSelected) { // Exact same comments as above for this part. liSelected.removeClass('selected'); next = liSelected.prev(); if (next.length > 0) { liSelected = next.addClass('selected'); } else { // liSelected = li.last().addClass('selected'); } } else { // liSelected = li.last().addClass('selected'); } } $('li.selected .single-line').focus(); });

Like I said in comments, the arrows are already usable with at.js.
As liSelected is undefined the if condition result in false.
Read on .eq() here

2nd EDIT
-------------------

Here is something working.

$(".single-line").on("focus", function () { $(".single-line").removeClass("selected"); // Clear all other "selected" class $(this).addClass("selected"); // Add "selected" class on focus... And on the editable div instead of on a li }); var triggers = ["@", ":"]; $(".single-line").keydown(function (e) { console.log(e.which); // usefull console.log var current = $(this); var opened = current.find(".atwho-query"); var flag = !!$.inArray(opened.html(), triggers); if (!flag) { console.log("query openned"); } else { console.log("query closed"); if (e.which === 40) { // Arrow down console.log("arrow down"); current.parent().next().children(".single-line").focus(); // Set focus on next li. } if (e.which === 38) { // Arrow up console.log("arrow up"); current.parent().prev().children(".single-line").focus(); // Set previous on next li. } } }); // This was your code $('.single-line').atwho({ at : "@", data : ['Person1', 'Person2', 'Person3', 'Person4'] })

example on jsfiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

If I make another JQuery function for this, do you think I can achieve what I'm asking for?
Notice that I just re-edited for missing . and )... Looks ok now.
Thanks, but there are some errors, it cannot find the variable name liSelected
Hold on... I'm downloading it to test.
Thank you very much!! Wow, you did an amazing job!! :)
|
1

Use At.js events like this:

var isOpenAt = false; $('.single-line').atwho({ at : "@", data : ['Person1', 'Person2', 'Person3', 'Person4'] }).on("shown.atwho", function (event, flag, query) { isOpenAt = true; }).on("hidden.atwho", function (event, flag, query) { isOpenAt = false; });

This is not the best solution, but this working.

example on jsfiddle.net

Improve this answer

4 Comments

Can we open @list from js using button click function?
@yasir_mughal, This functionality is not available, there is only.atwho("hide") but no .atwho("show") see At.js API
Have any idea how we can achieve this?
@yasir_mughal, nope, but you can ask a question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.