Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <textarea class="searchBox" cols="20" rows="10"></textarea>
</body>
</html>
 
var triggered = false; 
var trigger1 = "@"; 
​
var trigger2 = "#"; // Defining the trigger
​
​
var data1 = [
    {
        label: "ateev",
        value: "ateev@live.com"
    },
    {
        label: "sam",
        value: "sam@altman.com"
    }, 
    {
        label: "penny",
        value: "penny@lane.com"
    }
];
​
var data2 = [
  {
    tag: "what"
  },
  {
    tag: "hello"
  },
  {
    tag: "there"
  }
];
​
​
$(".searchBox").autocomplete({
    minLength: 0,
    source: data,
    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) + ui.item.value;
        triggered = false;
        return false;
    },
    focus: function () {
        return false;
    }
}).data( "ui-autocomplete" )._renderItem = function (ul, item) {
    return $("<li>")
        .append("<a>" + "<b>" + item.label + "</b>" + item.value + "</a>")
        .appendTo(ul);
};
​
​
$(".searchBox").keypress(function (e) {
  
    if (e.charCode != 64 && e.charCode != 35) {
          return;
    }
​
    if (e.charCode == 64) {
      trigger = trigger1;
      data = jQuery.extend(true, {}, data1);
    }
   else if (e.charCode == 35 ){
       trigger = trigger2;
       data = jQuery.extend(true, {}, data2);
     }
});
​
​
$(".searchBox").autocomplete({
    minLength: 0,
    source: data,
    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) + ui.item.value;
        triggered = false;
        return false;
    },
    focus: function () {
        return false;
    }
}).data( "ui-autocomplete" )._renderItem = function (ul, item) {
    return $("<li>")
        .append("<a>" + "<b>" + item.label + "</b>  " + item.value + "</a>")
        .appendTo(ul);
};
​
$('.searchBox').keyup(function (e) {
​
    if (e.keyCode == 38 || e.keyCode == 40) {
        return;
    }
​
    var text = this.value;
    var len = text.length;
    var last;
    var query;
    var index;
​
    if (triggered) {
        index = text.lastIndexOf(trigger);
        query = text.substring(index + trigger.length);
        $(this).autocomplete("search",query);
    } else if (len >= trigger.length) {
        last = text.substring(len - trigger.length);
        triggered = (last === trigger);
    }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers