Question

我的目标是完成一项功能，即用户在输入字段中键入某些文字，然后在他们重新输入时，<li>元素会根据用户输入的内容显示在下方。

例如，有一个文本输入字段，用户输入红色 - 将显示以下结果：

红椅子
红苹果
red floor

如果他们输入蓝色，则会显示以下结果：

蓝色表面
蓝色汽车
蓝色电脑

我目前有这段代码，但似乎没有出现自动填充结果：

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>  
<script>
$(document).ready(function() {
   $("input#autocomplete").autocomplete({
      source : 
           [ { value: "http://foo.com",
             label: "Spencer Kline"
           },
           { value: "www.example.com",
             label: "James Bond"
           },

         ],
    select: function( event, ui ) { 
        window.location.href = ui.item.value;
    }
  });
});
</script>      
<input type="text" id="autocomplete" style="width: 75%;">
</body>
</html>

Answer 1

您需要添加jQuery UI JS，jQuery UI CSS和jQuery个库。

此外，您的代码需要进行一些更改。它应该是这样的：

$(document).ready(function() {
  $("input#autocomplete").autocomplete({
    source: [{
        value: "www.foo.com",
        label: "Spencer Kline"
      }, {
        value: "www.example.com",
        label: "James Bond"
      }

    ],
    select: function(event, ui) {
      window.location.href = ui.item.value;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<input type="text" id="autocomplete" style="width: 75%;">

根据输入文本输入的文本显示<li>

1 个答案: