html formatted text in autocomplete

[morgenweckParticipant]

Is it possible to have html formatted valued in the autocomplete? I’m looking to develop a similar search function to LinkedIn where the autocomplete is multi lined with HTML formatted text. If so do you have any sample code?

[morgenweckParticipant]

I set it up on the server side and it works fine with HTML formatted text

[morgenweckParticipant]

I take that back– it shows nice with the formatted html but when I select a value the raw html shows in the input control. Is it possible to display the formatted HTML but select a basic value without the html code?

[HristoParticipant]

Hello morgenweck,

If you talk about “Auto-Complete” demo of the jqxTextArea.
I would like to suggest you try to wrapp content in one div and before set – get the text.
(html – .innerText; jquery – .text())

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[morgenweckParticipant]

Sorry I don’t understand can you give a little more detail? My code is

$(document).ready(function () {

$.ajax({
type: “POST”,
url: “/xxx.asmx/xxxyyy”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
beforeSend: function (xhr) {

},
success: function (data) {
var source =
{
datatype: “json”,
datafields: [
{ name: ‘LastName’, type: ‘string’ },
{ name: ‘FirstName’, type: ‘string’ }
],
localdata: data.d
};

var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
var records = dataAdapter.records;
var length = records.length;

},
loadError: function (jqXHR, status, error) {
},
beforeLoadComplete: function (records) {

}
});
dataAdapter.dataBind();
$(“#jqxInput”).jqxInput({ source: dataAdapter, placeHolder: “Name:”, displayMember: “LastName”, valueMember: “FirstName”, width: 200, height: 25 });
}
});
});

[HristoParticipant]

Hello morgenweck,

Also, I would like to suggest to look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxinput/remoteautocomplete.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[morgenweckParticipant]

Sorry- but I have spent tons of hours looking at every sample before I even posted the original question and still don’t understand how any of this helps. I have created working code using just jQuery autocomplete but I wanted to stay in the jqwidgets family.
You stated (html – .innerText; jquery – .text()) in your original post can you please post some working code.

[HristoParticipant]

Hello morgenweck,

If I understand you in the right way what you try to achieve.
(to present various elements of “searching” in the stylized form)
In that case, I would like to suggest you use opportunities of the jqxComboBox.
Please, take a look at this example:
http://jsfiddle.net/jqwidgets/v6WqF/
(Hint: You could transform to look more as “jqxInput” this demo will be helpful.)
Hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[morgenweckParticipant]

Thanks for the information but we still are not on the same page. What I’m looking for is like http://cdn.rawgit.com/salmanarshad2000/demos/v1.0.0/jquery-ui-autocomplete/custom-html-in-dropdown.html

or jQuery’s Autocomplete has
http://stackoverflow.com/questions/6618494/jquery-autocomplete-styling-the-extra-data-i-e-description
where the description can take a style sheet.

I want to create the descriptions like LinkedIn https://www.linkedin.com/

[HristoParticipant]

Hello morgenweck,

Please, take a look at this example:
http://jsfiddle.net/zcdyjq15/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[morgenweckParticipant]

I totally appreciate your effort 2 questions.
1. Why does your example only work with the letter “A”
2 How can I use your examples:
renderSelectedItem: function(index, item)
{
var datarecord = data[index];
return datarecord.firstname + ” ” + datarecord.lastname;
},
renderer: function (index, label, value) {
var datarecord = data[index];
var table = ‘<table style=”min-width: 150px;”><tr><td>’ + datarecord.firstname + ” ” + datarecord.lastname + ‘</td></tr><tr><td>’ + datarecord.title + ‘</td></tr></table>’;
return table;
with the AutoComplete jqxInput ?

[HristoParticipant]

Hello morgenweck,

This is an example – display of items in a particular style.
I suggest you use jqxComboBox instead of jqxInput because thus could use more easy way to visualize items.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts