jquery ui 自动补全实现

我迪马

于 2021-11-09 10:23:52 发布

阅读量174

点赞数

文章标签： jquery ui javascript

本文链接：https://blog.csdn.net/whoomu/article/details/121222610

版权

这个示例展示了如何使用jQuery UI的Autocomplete功能来创建一个自动完成输入框，通过AJAX从本地服务器获取数据。输入信息后，它会发送GET请求到指定URL，解析返回的JSON数据，并在下拉列表中显示。用户选择一个项目时，输入框和隐藏字段会更新选中的值。

摘要由CSDN通过智能技术生成

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 自动完成（Autocomplete） - 自定义数据并显示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>

  </style>
  <script>
    $(function() {
      $( "#search" ).autocomplete({
        multiple: false,//是否允许输入多个值. Default: false
        source: function (request, response){
          var resultData
          var inputData = $("#search").val();//获取输入的信息
          console.log(inputData)
          $.ajax({
            //请求方式
            type: "get",
            //请求的媒体类型
            contentType : "application/json",
            url: 'http://localhost:8080/testMysql?inputData=' + inputData,
            async: false,
            //请求成功
            success: function (result) {
              resultData = JSON.parse(result)
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
              console.log(e.status);
              console.log(e);
            }
          })
          response($.map(resultData,
                  function(item) { // 此处是将返回数据转换为 JSON对象，并给每个下拉项补充对应参数
                    return {
                      // 设置item信息
                      label: item.label.toString(),
                      // 下拉项显示内容
                      value: item.value.toString(),
                      // 下拉项对应数值
                    }
                  }));
        },
        select: function( event, ui ) {
          console.log("选择列表"+ui.item.label)
          $( "#search" ).val( ui.item.label );
          $( "#search-id" ).val( ui.item.value );
          return false;
        }
      })
    });
  </script>
</head>
<body>

<div id="project-label">选择一个项目（请键入 "j"）：</div>
<input id="search">
<input type="hidden" id="search-id">
<p id="project-description"></p>


</body>
</html>