jQuery UI. Autocomplete Demo.

Autocomplete widget with additionals info in object.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<div class="ui-widget">
    <label for="fruit">Fruits: </label>
    <input id="fruit">
</div>
<textarea></textarea>

CSS

*:focus {
  outline: none;
}
.ui-widget {
  margin: 5px;
}
textarea {
    display: block;
    position: absolute;
    top: 42px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 2px dashed green;
    background-color: black;
    color: green;
    padding: 5px;
    font: 11px monospace;
    resize: none;
}

JavaScript

var fruit = [
{label:"Apple", value:"Apple",toServer:"apl"},
{label:"Apricot", value:"Apricot",toServer:"apr"},
{label:"Avocado", value:"Avocado",toServer:"avc"},
{label:"Banana", value:"Banana",toServer:"bnn"},
{label:"Bilberry", value:"Bilberry",toServer:"bbr"},
{label:"Blackberry", value:"Blackberry",toServer:"blbr"},
{label:"Blackcurrant", value:"Blackcurrant",toServer:"blc"},
{label:"Blueberry", value:"Blueberry",toServer:"blubr"},
{label:"Currant", value:"Currant",toServer:"c"},
{label:"Cherry", value:"Cherry",toServer:"ch"},
{label:"Cherimoya", value:"Cherimoya",toServer:"chm"},
{label:"Clementine", value:"Clementine",toServer:"clm"},
{label:"Date", value:"Date",toServer:"d"},
{label:"Damson", value:"Damson",toServer:"dm"},
{label:"Dragonfruit", value:"Dragonfruit",toServer:"dfr"},
{label:"Durian", value:"Durian",toServer:"drn"},
{label:"Eggplant", value:"Eggplant",toServer:"epn"},
{label:"Elderberry", value:"Elderberry",toServer:"ebr"},
{label:"Feijoa", value:"Feijoa",toServer:"f"},
{label:"Gooseberry", value:"Gooseberry",toServer:"gbr"},
{label:"Grape", value:"Grape",toServer:"g"},
{label:"Grapefruit", value:"Grapefruit",toServer:"gfr"},
{label:"Guava", value:"Guava",toServer:"gva"},
{label:"Huckleberry", value:"Huckleberry",toServer:"hbr"},
{label:"Jackfruit", value:"Jackfruit",toServer:"jfr"},
{label:"Jambul", value:"Jambul",toServer:"j"},
{label:"Kiwi fruit", value:"Kiwi fruit",toServer:"kfr"},
{label:"Kumquat", value:"Kumquat",toServer:"k"},
{label:"Legume", value:"Legume",toServer:"l"},
{label:"Lemon", value:"Lemon",toServer:"lmn"},
{label:"Lime", value:"Lime",toServer:"lm"},
{label:"Lychee", value:"Lychee",toServer:"lch"},
{label:"Mandarine", value:"Mandarine",toServer:"mdr"},
{label:"Mango", value:"Mango",toServer:"mng"},
{label:"Melon", value:"Melon",toServer:"mln"},
{label:"Cantaloupe", value:"Cantaloupe",toServer:"clp"},
{label:"Honeydew melon", value:"Honeydew melon",toServer:"hmln"},
{label:"Watermelon",...