Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery ui autocomplete multiline results styling

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: enter image description here

like image 806
dragonfly Avatar asked Jul 19 '17 18:07

dragonfly


People also ask

What is autocomplete in jqueryui?

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.

What is the difference between UI-autocomplete-input and UI- autocomplete?

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.

What is autocomplete AutoCAD?

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.

How to convert an input field to an autocomplete in HTML?

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 −


2 Answers

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>
like image 158
ibubi Avatar answered Sep 18 '22 10:09

ibubi


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

like image 30
Milton Filho Avatar answered Sep 19 '22 10:09

Milton Filho