Menu
when I press down arrow thro' the results, its displaying the html elements like span,br, div. Is there a work around to style the results with out adding span, br, div to the results.Or how can I prevent results from show in the input field upon pressing down arrow. Only "Enter" key with dispaly the results in input field
Attaching the screenshot:
806
This feature prevents the user from having to enter an entire word or a set of words. JQueryUI provides an autocomplete widget — a control that acts a lot like a <select> dropdown, but filters the choices to present only those that match what the user is typing into a control.
ui-autocomplete: The menu used to display matches to the user. ui-autocomplete-input: The input element that the autocomplete widget was instantiated with. While requesting data to display to the user, the ui-autocomplete-loading class is also added to this element. This widget requires some functional CSS, otherwise it won't work.
Autocomplete. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. The datasource is a simple JavaScript array, provided to the widget using the source-option.
Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute. The autocomplete () method can be used in two forms −
Here this may help.
$(function() {
var doctors = [{
label: "Dr Daniel Pound",
department: "Family Medicine, Medicine, Obesity",
address: "3575 Geary Blvd Fl San Francisco CA"
}, {
label: "Dr Daniel Test",
department: "Pediatrics, Pediatric Hematology",
address: "1825 4th St Fl San Francisco CA"
}, {
label: "Dr Daniel Another",
department: "Orthopedics",
address: "1825 4th St Fl San Francisco CA"
}];
$("#doctor").autocomplete({
minLength: 2,
source: doctors,
select: function(event, ui) {
$("#doctor").val(ui.item.label);
return false;
}
}).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li class='each'>")
.append("<div class='acItem'><span class='name'>" +
item.label + "</span><br><span class='desc'>" +
item.department + "</span><br><span class='desc'>" +
item.address + "</span></div>")
.appendTo(ul);
};
});.each{
border-bottom: 1px solid #555;
padding: 3px 0;
}
.acItem .name{
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
.acItem .desc{
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color:#555;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<body>
<h1>Hello AutoComplete</h1>
<input id="doctor" type="text" />
</body>Look the oficial documentation
http://jqueryui.com/autocomplete/#custom-data
You can override the select and focus event
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
...
return false;
}
To display a single property of the object or a custom format, the #project is the input that you apply the autocomplete plugin
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
