自動完成代碼位置問題

Question

我正在使用ui自動完成插件，除了代碼被插入「body」並且我需要它位於另一個類下的事實之外，所有代碼都很好。

snip愚蠢的編輯器。

我正在使用基本的jquery ui自動完成插件http://jqueryui.com/demos/autocomplete/，但它將代碼插入正文的底部。

任何想法？

謝謝

Answer 1

很難說出你在問什麼。 爲您打造一個jQuery UI自動完成圍繞一個文本框：

<input id="project" /> 

你可以把你的標籤，無論你想，基本上是這樣。 然後你必須用jQuery創建的自動完成：

$("#project").autocomplete(); 

我已經爲您準備了fiddle。

或者你可以運行這個命令：

var projects = [{ 
 
    value: "jquery", 
 
    label: "jQuery", 
 
    desc: "the write less, do more, JavaScript library", 
 
    icon: "jquery_32x32.png" 
 
}, { 
 
    value: "jquery-ui", 
 
    label: "jQuery UI", 
 
    desc: "the official user interface library for jQuery", 
 
    icon: "jqueryui_32x32.png" 
 
}, { 
 
    value: "sizzlejs", 
 
    label: "Sizzle JS", 
 
    desc: "a pure-JavaScript CSS selector engine", 
 
    icon: "sizzlejs_32x32.png" 
 
}]; 
 

 
$("#project").autocomplete({ 
 
    minLength: 0, 
 
    source: projects, 
 
    focus: function(event, ui) { 
 
    $("#project").val(ui.item.label); 
 
    return false; 
 
    }, 
 
    select: function(event, ui) { 
 
    alert(ui.item.desc); 
 

 
    return false; 
 
    } 
 
}).data("autocomplete")._renderItem = function(ul, item) { 
 
    return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul); 
 
};

#myDiv { 
 
    margin-top: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> 
 

 
<div id="myDiv"> 
 
    <label for="project">projects (j to see results):</label> 
 
    <input id="project" /> 
 
</div>