1

So I'm trying to recreate Facebooks tagging system in jquery. I can not use any plugins. I have some of it already:

<html lang="de">

<head>
    <title>Autocomplete</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function () {
          var triggered = false;
          var trigger = "@";
          var index = -1;

          $("input").autocomplete({
              source: [
                  "AAB",
                  "AAC",
                  "CCE",
                  "CCG",
                  "IIU",
                  "IIO"],
              search: function () {
                  if (!triggered) {
                      return false;
                  }
              },
              select: function (event, ui) {
                  var text = this.value;
                  var pos = text.lastIndexOf(trigger);

                  this.value = text.substring(0, pos + trigger.length) + ui.item.value;
                  triggered = false;
                  return false;
              },
              focus: function () {
                  return false;
              },
              minLength: 0
          }).on("keyup", function () {
              var text = this.value;
              var len = text.length;
              var last;
              var query;

              if (triggered) {
                  index = text.lastIndexOf(trigger);
                  query = text.substring(index + trigger.length);
                  $(this).autocomplete("search", query);

                  if (index === -1) {
                      triggered = false;
                  }
              } else if (len >= trigger.length) {
                  console.log("ELSE IF")
                  last = text.substring(len - trigger.length);
                  triggered = (last === trigger);
              }
          });
      });
    </script>
</head>

<body>
    <label>Input something here:</label>
    <br>
    <input type="text" value="" autofocus="true" />
</body>

</html>

So i got the following problem with it: Tagging works just fine, but after I hit the @ once the Autocomplete doesn't go away. It stops searching but it still displays that there were no results found. I tried to solve it as follows:

  • I tried the "disabled" property inside the autocomplete which led to it not working at all.
  • I tried the "destroy" method, but it led to me not being able to call the autocomplete after the first time
  • I tried the "disable" methode which led to "there are 6 elements" (I'm paraphrasing here) being displayed
  • And finally I tried the close methode which does absolutly nothing.

So my Question: Does anybody know a trick to how this could work? do I have to rewrite my code somehow?

Rajan Goswami
  • 769
  • 1
  • 5
  • 17
A.hohen
  • 11
  • 4

1 Answers1

0

it is a little bit strange... but how about that in the keyup event:

if(this.value == ""){
        triggered = false;
        $("input").autocomplete( "close" );
    }

See here

bloC
  • 526
  • 3
  • 16
  • There is a problem with that. The point of the whole system is that i can type a whole text and put an @ in there somewhere. After the @ i should be able to tag an item and if i delete the @, not the whole text, the autocomplete should close. Thank you for your help tho. – A.hohen Aug 12 '15 at 13:00
  • so you want the autocomplete to open as soon as you write an @? – bloC Aug 12 '15 at 13:23
  • It already does ^^ i want it to close completely after I choose something or delete the @. that works in fiddle for some reason (apperently fiddle doesn't display the "no results" part) the but not in my editor... – A.hohen Aug 12 '15 at 13:29
  • okay, then that's maybe the reason why I didn't get you... it works fine for me in fiddle... sorry I tried my best to help you, but if I can't emulate it in fiddle it's hard to find a solution :( – bloC Aug 12 '15 at 13:40
  • Just found that http://stackoverflow.com/questions/4718968/detecting-no-results-on-jquery-ui-autocomplete Maybe you can hide the box for no results... – bloC Aug 12 '15 at 14:06