找不到jQuery輸入自動完成功能

Question

我試圖實現自動完成功能，我在堆棧溢出這里找到了jQuery UI AutoComplete：僅允許從建議列表中選擇值

這是我正在使用的jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

這是我的實現

<div id="ServiceProvider">
<h3 style="background-color:#EA6A20 ;"><b>Please enter the name of the HR representative who provided service to you</b> </h3>
<input autocomplete="on" type="text" name="HRName"  id="HRName" value=""></br></br>


<script>
var validOptions = ["First Last", "First1 Last1", "First2 Last2"]
previousValue = "";

$('#HRName').autocomplete({
    autoFocus: true,
    source: validOptions
}).keyup(function() {
    var isValid = false;
    for (i in validOptions) {
        if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue
    } else {
        previousValue = this.value;
    }
});

</script>
</div>

我得到的錯誤是

Uncaught TypeError: Object [object Object] has no method 'autocomplete' Customer_Survery.php:266
(anonymous function) Customer_Survery.php:266

謝謝您的幫助

Answer 1

您需要在加載jquery庫后包括如下庫：

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

一個建議是將其包裝在document.ready()

<script>
$(document).ready(function(){
  var validOptions = ["First Last", "First1 Last1", "First2 Last2"]
  previousValue = "";

  $('#HRName').autocomplete({
    autoFocus: true,
    source: validOptions
  }).keyup(function() {
    var isValid = false;
    for (i in validOptions) {
        if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue
    } else {
        previousValue = this.value;
    }
  });
});

</script>

Answer 2

您需要包含自動完成插件的jquery UI：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

您還應該包括以下CSS之一：

黑領帶 ， 薄脆餅干 ， 庫比蒂諾 ， 深色蜂巢 ， 點愛 ， 茄子 ， 興奮自行車 ， 輕彈 ， 熱偷偷摸摸 ， 人類 ， 青蛙 ， 薄荷巧克力 ， 陰天 ， 胡椒研磨機 ， 雷蒙德 ， 光滑度 ， 南街道 ， 起點 ， 陽光明媚 ， 花哨 的錢包 ， 突兀 ， ui黑暗 ， ui輕盈和vader 。

即

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">

歸功於從Google的CDN下載jQuery UI CSS