Question

我正在尝试集成easyAutocomplete插件，现在我正在尝试填写电子邮件文本框，同时从建议列表中选择一个项目。使用json占位符api - https://jsonplaceholder.typicode.com/users 用户点击任何建议列表后，我想在文本框中填写相应的电子邮件ID。

var mail_id = '';
var name = '';

function assignvalue(element) {
  mail_id = element.mail;
  mail_id = $("#text-mail").val(mail)
  return mail_id;
}
var options = {
  url: function(phrase, element) {
    return "https://jsonplaceholder.typicode.com/users";
    console.log(element);
  },

  getValue: function(element) {
    name = element.name;
    mail = element.mail;

    return name;
  },

  list: {
    maxNumberOfElements: 5,
    sort: {
      enabled: true
    },

    match: {
      enabled: true
    },

    showAnimation: {
      type: "fade", //normal|slide|fade
      time: 400,
      callback: function() {}
    },

    hideAnimation: {
      type: "slide", //normal|slide|fade
      time: 400,
      callback: function() {}
    },

    onClickEvent: function() {
      assignvalue('#example-ajax-post');
    },

    onSelectItemEvent: function() {
      //console.log("onSelectItemEvent !");  // Hover
    },

  },
  requestDelay: 1
};

$("#example-ajax-post").easyAutocomplete(options);

/************************************************************
                       easy-autocomplete
************************************************************/

.easy-autocomplete .easy-autocomplete-container ul {
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
}

.easy-autocomplete .easy-autocomplete-container ul .eac-category b,
.easy-autocomplete .easy-autocomplete-container ul li b {
  color: #ff4000;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js" type="text/javascript"></script>


  <style>
    .container {
      padding-top: 30px;
    }
    
    a {
      margin-top: 30px;
      display: block;
    }
    /************************************************************
                       easy-autocomplete
************************************************************/
    
    .easy-autocomplete .easy-autocomplete-container ul {
      box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .easy-autocomplete .easy-autocomplete-container ul .eac-category b,
    .easy-autocomplete .easy-autocomplete-container ul li b {
      color: #ff4000;
    }
  </style>
</head>

<body>

  <input id="example-ajax-post" />
  <input id="text-mail" />

</body>

</html>

Answer 1

<script type="text/javascript">
            jQuery(document).ready(function($){

            var options = {

                url: "<?php echo ASSETS_URI . '/js/abc.json';?>",
                getValue: "name",

                list: { 
                    match: {
                      enabled: true
                    }
                },

                theme: "square"

            };

            $("#abc_auto").easyAutocomplete(options);

            });
        </script>

在要显示建议列表的搜索表单中使用id =“abc_auto”

easyautocomplete插件 - 从建议列表中选择项目时填写文本框

1 个答案: