jquery-ui在下拉菜单上显示缩略图

Question

我正试图在ajax调用的jquery-ui下拉列表中显示一张小图片（用户缩略图）。我怎样才能做到这一点？我是ajax的新手，并且之前从未使用过jquery-ui，所以如果有人可以指导我正确的方向，我会很感激。谢谢！

HTML / JS

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />

{literal}
<script type="text/javascript">
$(function() {

    $(".auto").autocomplete({
        source: "/ajax/search_user.php",
        minLength: 2,
        limit: 10
    });             

});
</script>
{/literal}

<form action="" class="forms" method="post">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">@</div>
            <input type="text" class="form-control auto" name="to" placeholder="Username">
        </div>
    </div>
    <div class="form-group">
        <textarea class="form-control" name="message" placeholder="Enter Message.." cols="50" rows="8"></textarea>
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-green" value="Send Message">
    </div>
</form>

search_username.php（ajax文件）

<?php

require_once('../init.php');
requireLogin();


if (isset($_GET['term'])) {
    $return_arr = array();

    try {

        $conn = new PDO("mysql:host=".DB_SERVER.";port=8889;dbname=".DB_NAME, DB_USER, DB_PASSWORD);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $stmt = $conn->prepare('SELECT username FROM users WHERE username LIKE :term');
        $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

        while($row = $stmt->fetch()) {
            $return_arr[] =  $row['username'];
        }

    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }

    echo json_encode($return_arr);
}

?>

Answer 1

找到我自己的问题的答案，所以我希望将来可以对其他人有用。

http://www.jensbits.com/2011/03/03/jquery-autocomplete-with-html-in-dropdown-selection-menu/