如何从服务器/数据库中获取autosuggest文本框中的数据?

时间:2014-08-03 16:23:13

标签: javascript jquery ajax jquery-ui jquery-autocomplete

我创建了一个autosuggest文本框,它从定义的数组中获取数据。如何从服务器获取数据?

以下是我的代码 -

HTML代码 -

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>autocomplete demo</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-1.10.2.js"></script>
  <script src="jquery-ui.js"></script>
</head>
<body>

<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">

<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( tags, function( item ){
              return matcher.test( item );
          }) );
      }
});
</script>

</body>
</html>

Javascript文件太长了。我不能在这里粘贴它们。

1 个答案:

答案 0 :(得分:0)

您可以通过多种方式使用服务器中的数据填充自动填充框。最简单的方法之一是从服务器检索数据并将其存储在本地,然后使用它。

var searchData = [];
$.get("ajax/mydata", function( data ) {
  searchData.push(data);
});

然后,继续使用自动完成部分。

$( "#autocomplete" ).autocomplete({
      source: searchData, 
      ...
});

另外,请查看http://jqueryui.com/autocomplete/

上的jQuery UI自动填充文档

PS。如果它对您有用,请不要忘记将其标记为答案。