easyautocomplete plugin - Заполните текстовое поле при выборе элемента из списка предложений - PullRequest
Новая
       31

easyautocomplete plugin - Заполните текстовое поле при выборе элемента из списка предложений

0 голосов
/ 21 мая 2018

Я пытаюсь интегрировать плагин easyAutocomplete сейчас, сейчас пытаюсь заполнить текстовое поле электронной почты при выборе элемента из списка предложений.Я использую json-заполнитель api - https://jsonplaceholder.typicode.com/users После того, как пользователь нажал на любой из списка предложений, я хочу заполнить соответствующий идентификатор электронной почты в текстовом поле. 

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>

1 Ответ

0 голосов
/ 21 мая 2018 
<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" в форме поиска, в которой вы хотите показать список предложений

...