找不到jquery输入自动完成功能答案

【问题标题】：jquery input autocomplete function not found找不到jquery输入自动完成功能
【发布时间】：2014-01-07 00:16:06
【问题描述】：

我正在尝试实现一个自动完成功能，我在此处发现堆栈溢出jQuery UI AutoComplete: Only allow selected valued from suggested list

这是我正在使用的 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

感谢您的帮助

【问题讨论】：

自动完成不是 jQuery 的一部分，你也需要包含 jQuery UI...

标签： javascript jquery html

【解决方案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>

【讨论】：

【解决方案2】：

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

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

您还应该包括以下 css 之一：

black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, le-frog, @98654331@, @9867654331@ ,overcast,pepper-grinder,redmond,smoothness,south-street,start,sunny,swanky-purse,trontastic,ui-darkness,@98765434@,@9876

即

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

归功于Downloading jQuery UI CSS from Google's CDN

【讨论】：