jQuery UI自动完成小部件是一个非常有用的工具，它能够帮助我们在输入框中提供一个自动完成的搜索功能。通过配置自动完成小部件，我们可以根据需要自定义搜索结果的来源和显示方式。接下来，我将为大家详细介绍如何配置和使用jQuery UI自动完成小部件，并提供一个实际案例代码供大家参考。

html

javascript
$(function() {
    $("#search-input").autocomplete({
        source: function(request, response) {
            // 在这里编写数据源的逻辑，根据用户输入的内容返回相应的搜索结果
        },
        select: function(event, ui) {
            // 在这里编写处理选中结果的逻辑
        }
    });
});

javascript
source: function(request, response) {
    var options = ["apple", "banana", "cherry", "date", "elderberry", "fig", "grape"];
    var results = $.ui.autocomplete.filter(options, request.term);
    response(results);
}

javascript
source: function(request, response) {
    $.ajax({
        url: "search.php",
        dataType: "json",
        data: {
            term: request.term
        },
        success: function(data) {
            response(data);
        }
    });
}

javascript
select: function(event, ui) {
    var selectedValue = ui.item.value;
    var selectedLabel = ui.item.label;
    // 在这里编写处理选中结果的逻辑
}

html
    
    
    
    
    
    
    
jQuery UI自动完成小部件搜索配置