Jquery在不同的DIV上显示自动完成结果

Question

我有以下jquery代码

$('#search-name').autocomplete({
    search: function(event, ui) {
        $('.staff-format ul').empty();
    },
    source: ["James", "Katy", "Jessica", "Catherine", "Paul", "Frank"]
}).data('search-name')._renderItem = function(ul, item) {
    return $('<li/>')
   .data('item.search-name', item)
   .append(item.value)
   .appendTo($('.staff-format ul'));
};

使用以下HTML

<form action="" method="get">
    <input class="field" id="search-name" name="search-name" type="text" />
    <input class="submit" id="search-button" type="submit" value="Search" />
</form>
<div class="staff-format">
    <ul class="staff-list">
        <!-- CONTENT WILL BE DYNAMICALLY PUT HERE -->
    </ul>
</div>

我正在使用这个jquery UI框架

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
jquery-1.9.1.min.js

但是我遇到了这种错误：

TypeError：$（...）。autocomplete（...）。data（...）未定义

如果我输入关联的关键字，则自动完成功能完美无缺。但结果并没有显示在我想要的地方。