How do I hide values when scrolling through jquery ui autocomplete return

Question

I'm using the jquery UI autocomplete plugin. The value that is being returned contains several pieces of data, including some that is encoded. When the user uses the keyboard to scroll through the labels returned by the ajax call, the encoded values display in the field. I've got code to replace the value with the label after it's been processed on select so, after they select, the label is displayed. Is there a way to not show the value as the user is scrolling through the results?

Here is my code:

$('#text_field').autocomplete({
            minLength: 3,
            source: "some_page.php?gender=f623e75af30e62bbd73d6df5b50bb7b5",
            select: function(event, ui){
                    var valArray = ui.item.value;
                    ui.item.value = '';
                    valArray = valArray.split('~');
                    $('#search_button').attr('href', 'somepage.com/report.php?attr_one='+valArray[0]+'&attr_two='+valArray[3]);
                    ui.item.value = ui.item.label;
            }

score 2 · Accepted Answer · edited May 23 '17 at 12:21

2

look into the ._renderItem and its ability to create custom visual display.

This question/answer has some details: jQueryUI: how can I custom-format the Autocomplete plug-in results?

edited May 23 '17 at 12:21

Community

1
1

answered Dec 04 '12 at 14:22

Mark Schultheiss

32,614
12
69
100

I looked into it and, while it was perfect for formatting the list, it seemed the value always displayed as it was sent. However, I didn't realize until looking into this that I could send more than just the value and label. I was able to send a third parameter back to the autocomplete with all of the encoded data and simply make the label and value match. Thanks! – Trevor Boland Dec 04 '12 at 14:37

How do I hide values when scrolling through jquery ui autocomplete return

1 Answers1