Question

我想获得一个像这样的自动完成功能：http://www.nationalrail.co.uk/default.aspx。

我想提供全名作为输入文本的建议，例如

汉诺威（HAN）

但是在选择了建议的条目后，我只想设置三个字母而不是像这样的全名

HAN

我已经尝试了JQueryUI - Autocomplete，但建议的名称和选择条目后将设置的值之间没有区别。

我有一个类似

的数组

private PostsContentsEntity contentsEntity;

@OneToOne( targetEntity = PostsContentsEntity.class)
@JoinColumn(name = "PostId",referencedColumnName = "PostId", insertable = false, updatable = false)
public PostsContentsEntity getContentsEntity() {
    return this.contentsEntity;
}

public void setContentsEntity(PostsContentsEntity contentsEntity) {
    this.contentsEntity = contentsEntity;
}

有没有可以做到的包，模块，框架？

Answer 1

您可以尝试使用此代码段...希望这会对您有所帮助。

这将是您的HTML内容，并且还会给出相应的脚本...

     <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-archaius</artifactId>
        <version>1.3.4.RELEASE</version>
        </dependency>

脚本在下面给出

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

希望这会对你有所帮助。

Answer 2

您将需要标签和ID。标签用于文本搜索，而ID用于存储代码。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>


<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var data = [
        {"id":"HAN","label":"Hannover [HAN]"},
        {"id":"FRA","label":"Frankfurt [FRA]"},
    ]
    $( "#search" ).autocomplete({
      source: data,
      select: function(event, ui) {
                $('#code').val(ui.item.id);
      },
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <input type="text" id="search">
  <input type="text" id="code"> <!-- change to type="hidden" -->
</div>
</body>
</html>

JQuery - 自动完成/ smartSearch插件

2 个答案: