Question

有人帮我创建了一个自动填充字段的脚本但是我有一个问题：当我将光标鼠标留在文本字段之外时，其他匹配项目会消失！有什么想法解决这个问题吗？

下面这个文件（index12.php）调用发送json（http://stegonia.fr/autocomplete/server2.php）的server2.php文件

这里是整个index.12.php（http://stegonia.fr/autocomplete/index12.php）

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax</title>
	   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	 <!-- Bootstrap core CSS -->
	<link href="./css/bootstrap.min.css" rel="stylesheet"> 
    <script src="jquery-2.1.4.min.js"></script>
    <script src="//twitter.github.io/typeahead.js/releases/latest/typeahead.jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
	

</head>
<body>
	<div class="container-fluid">
		Search a species name and press enter (linotte for example) :
	  <form method="post" action="index12.php" id="form">
			<input type="text" name="speciesname" id="speciesname" autocomplete="off" class="typeahead"/>
      <input type="hidden" name="speciesid" id="speciesid">
    </form>
<script>

  function html_decode(value) {
    return $('<textarea />').html(value).text()
  }

  $(document).ready(function () {
    var input = document.getElementById('speciesname');
    input.focus();

    $('#speciesname').typeahead({
      source: function (query, store) {
        if (!input.value || input.value.length < 3) {
          return [];
        }
        $.ajax({
            url: 'server2.php',
	          data: 'term=' + query,
            dataType: 'json',
            type: 'post',
            success: function (data) {
              var species = [];
              $.each(data, function (i, item) {
                species.push({ id: item.id, name: html_decode(item.value) });
              });
              return store(species);
            }
          }
        )
      },
      matcher: function (item) {
        return item.name ? item.name.toLowerCase()
          .indexOf(this.query.toLowerCase()) !== -1 : false;
      },
			afterSelect: function (item) {
			if (item.id) {
			  $(input).val(item.name);
			  $('#speciesid').val(item.id);
			  $('#form').submit();
			}
			}
    })
  });
</script>
<br>
<?php if (isset($_POST['speciesid'])): ?>
  <p>The code number (id number) of the previous selected species is : <?php echo $_POST['speciesid'] ?></p>
<?php endif; ?>
</body>
</html>

＆＃13;

将鼠标悬停在自动填充表单中的菜单上时，为什么菜单项会消失

0 个答案: