jquery autocomplete xml search from beginning

Search autocomplete using xml as source with search from beginning

HTML

<script src="http://freakyshape.com/js/jquery-ui-1.10.2.min.js"></script>
<div id="search-box">
type "for"
<div id="noMatches" >Sorry... No matches found !</div>
<input type="text" id="search"  placeholder="Search..."/>
<div href="#" id="showAll" type="submit" ><i class="icon-remove"></i></div>
</div>

CSS

/* Autocomplete
----------------------------------*/
.ui-autocomplete-input {
	font-size: 14px;
    color: #E0E0E0;
	line-height: 28px;
    border-width: 0;
    background: #1a1c1e;
}
.ui-helper-hidden-accessible {
	color: #50bfd6;
}
.ui-autocomplete {
	position: relative;
    background: #212325;
    cursor: pointer;
    display: block;
    list-style-type: none;
	max-width: 285px;
	max-height: 425px;
	margin-top: 5px;
	padding: 0 auto;
	border: none; 
    overflow-y: auto;
    overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	color: #FFF;
	border-radius: none; 
	-webkit-box-shadow: 0px 0px 25px rgba(0,0,0,0.95);
	-moz-box-shadow: 0px 0px 25px rgba(0,0,0,0.95);
	box-shadow: 0px 0px 25px rgba(0,0,0,0.95); 
}       
.ui-autocomplete-loading { 
	background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
html .ui-autocomplete { 
	width:1px; /* without this, the menu expands to 100% in IE6*/
}  
.ui-menu {
	list-style:none;
	width: 100%;
	margin: 0;
	display:block;
	border-radius: none;
	padding-left: 3px;
	padding-right: 3px;
}
.ui-menu .ui-menu-item {
	overflow: hidden;
	width: 100%;
	height: 60px;
	border-radius: none;
	margin-bottom: 3px;
	margin-top: 3px;
	padding: 0 auto;
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
	-webkit-transition: all 0.35s ease;
	-moz-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
}
.ui-menu .ui-menu-item a {
	width: 100%;
	heigth: 100%;
	color: #FFF;
	padding: 0 auto;
	margin: 0 auto;
	border-radius: none;

}
.ui-menu-item:hover {
    background-color: #50bfd6;
}
.ui-autocomplete .ui-menu .ui-menu-item .ui-state-hover,
.ui-menu .ui-menu-item .ui-state-active {
    background-color: #50bfd6;
}
.image-autocomplete {
	position: relative;
	float: left;
	height: 100%;
	width: 90px;
	left: 0;
	top: 0;
	margin-right: 5px;
    overflow:hidden;
	-webkit-box-shadow: 0px 0px...

JavaScript

var myArr = [];

	$.ajax({
		type: "POST",
		url: "/echo/xml/",
		dataType: "xml",
        data: {
            xml: "<element id='13' size='normal' category='blog'><icon class='icon-pencil'></icon><urlpage url='/portfolio/dock.html'></urlpage><urlimage src='./Post thumbnail images/formlabs.jpg'></urlimage><date date='12 Apr'></date><title>Formlabs 3D printer</title></element>"
        },
		success: parseXml,
		complete: setupAC,
		failure: function (data) {
			alert("XML File could not be found");
		}
	});

	function parseXml(xml) {
		$(xml).find("element").each(function () {
			title = $(this).text();
			id = $(this).attr("id");		
			category = $(this).attr("category");
			tag = $(this).find('tag').attr("tag");
			urlimage = $(this).find('urlimage').attr("src");
			urlpageautocomplete = $(this).find('urlpage').attr("url");
			myArr.push(new SearchItem(title, id, category, tag, urlimage, urlpageautocomplete));
		})
	}

	var SearchItem = function (title, id, category, tag, urlimage, urlpageautocomplete) {
		var ret = new Object();
		ret.value=title ;/*NEED THIS TO SEARCH*/
		ret.label=title + " " + category + " " + tag;/*NEED THIS TO DISPLAY IN SEARCH BOX*/
		ret.title = title;
		ret.id = id;
		ret.category = category;
		ret.tag = tag;
		ret.urlimage = 'http://freakyshape.com/'+urlimage;
		ret.urlpageautocomplete = urlpageautocomplete;
		ret.imageautocomplete = "image-autocomplete";
		ret.titleautocomplete = "title-autocomplete";
		ret.categoryautocomplete = "category-autocomplete";
		ret.linkurl = "link-auto";
        ret.renderHtml= "<a class=" + ret.linkurl + "  onclick=gestionClic(compteur" + ret.id + ");><div class=" + ret.imageautocomplete 
				+ "><img src='" + ret.urlimage + "'/ ></div>" + "<div class=" + ret.titleautocomplete + ">" + ret.title + "</div><div class=" + ret.categoryautocomplete + ">" 
				+ ret.category + "</div></a>";
		return ret;
	}

    function setupAC() {
        $("input#search").autocomplete({
            minLength: 3,
           ...