自动完成，在退格和文本不可见之前不显示选项

Question

ive created a JSfiddle here http://jsfiddle.net/8nzty/ code here:-

<script>
$(document).ready(function () {
    $(".items").click(function () {
        $(this).val('');
    });
    var items = [{ "ID": 1, "Name": "HP DL360p", "PartNo": " 670638-425", "Description": "" }, { "ID": 2, "Name": "Samsung 840 Pro 256GB", "PartNo": "", "Description": "256GB SSD" }, { "ID": 3, "Name": "HP MSA P2000", "PartNo": "AW568A", "Description": "" }, { "ID": 4, "Name": "HP BL460c G6", "PartNo": null, "Description": "HP G6 Blade" }]
    $("#Name").autocomplete({
        minLength: 0,
        source: items,
        focus: function (event, ui) {
            $("#Name").val(ui.item.Name);
            return false;
        },
        select: function (event, ui) {
            $("#Name").val(ui.item.Name);
            $("#PartNo").val(ui.item.PartNo);
            $("#Description").val(ui.item.Description);
            return false;
        }
    });
})
</script>
<table>
    <tbody>
        <tr>
            <td><span class="ui-helper-hidden-accessible" role="status" aria-live="polite">4 results are available, use up and down arrow keys to navigate.</span><input name="Name" class="items ui-autocomplete-input valid" id="Name" type="text" value="Item Name" autocomplete="off"></td>
            <td><input name="PartNo" class="items" id="PartNo" type="text" value="Part Number"></td>
            <td><input name="Description" class="items" id="Description" type="text" value="Description"></td>
            <td><input name="cmd" class="blue-button" id="btnAddItem" type="submit" value="+"></td>
            <td><input name="cmd" class="blue-button" id="btnRemoveItem" type="submit" value="-"></td>
        </tr>
    </tbody>
</table>

Whats supposed to happen: I type h and see a list of items beginning containing h I click an option part no and description are autofilled

whats happening: i type h, nothing happens i hit backspace a dropdown appears with none visible text (maybe its white?) on mouseover i see text appear in the name box, click one and its autofilled as expected.

Answer 1

See Fiddle

You almost got it. The issue is that you don't provide a way to show the options on the screen. You're using an array of JSON objects, so the widget needs to be told what data and how to display it.

$("#Name").autocomplete({
  //existing widget settings
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
  .append( "<a>" + item.Name + "<br>" + item.Description + "</a>" )
  .appendTo( ul );
};

to the end of the autocomplete widget solves the issue.