JqueryUI Autocomplete Combobox with JSON
Hi there, i got a problem, i don't how to use the autocomplete combobox of JqueryUI, i'm a newbie so i checked the documentation and i don't find an example with JSON, i just find them by separate examples. This is the code, i erased the options from the select control, i just did that:
My question is, where do i insert my source? thanks
This is my source:
source.php
- [{"mrc_id":"4","mrc_nmb":"BTC"},{"mrc_id":"5","mrc_nmb":"EPSON"},{"mrc_id":"6","mrc_nmb":"HP"},{"mrc_id":"7","mrc_nmb":"PANASONIC"}]
This is the page where the combobox is:
index.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tipo de Cosas</title>
<script language="javascript" type="text/javascript" src="../Jquery/jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Jquery/jquery-ui-1.8.2.custom/css/custom-theme/jquery-ui-1.8.2.custom.css"/>
<style type="text/css">
.ui-button { margin-left: -1px; }
.ui-button-icon-only .ui-button-text { padding: 0.35em; }
.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
</style>
</head>
<script type="text/javascript">
(function($) {
$.widget("ui.combobox", {
_create: function() {
var self = this;
var select = this.element.hide();
var input = $("<input>")
.insertAfter(select)
.autocomplete({
source: function(request, response) {
var matcher = new RegExp(request.term, "i");
response(select.children("option").map(function() {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
id: this.value,
label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
value: text
};
}));
},
delay: 0,
change: function(event, ui) {
if (!ui.item) {
// remove invalid value, as it didn't match anything
$(this).val("");
return false;
}
select.val(ui.item.id);
self._trigger("selected", event, {
item: select.find("[value='" + ui.item.id + "']")
});
},
minLength: 0
})
.addClass("ui-widget ui-widget-content ui-corner-left");
$("<button> </button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter(input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
}).removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.click(function() {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
}
});
})(jQuery);
$(function() {
$("#combobox").combobox();
$("#toggle").click(function() {
$("#combobox").toggle();
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label>Choose something </label>
<select id="combobox">
</select>
</div>
</div>