0

我正在使用运行良好的 jQuery UI 自动完成功能。现在我有另一个要求。当用户键入 Ame（地名中的前几个字母）时，自动完成显示“America”，但如果用户没有从列表中选择并输入全名“America”，这是一个有效的地方。在这里，我正在验证提示“不是一个有效的地方”，因为他没有从列表中选择。现在我的要求是，如果用户不从列表中选择，我想用列表中的第一个焦点值填充地点名称值。

4

2 回答 2

0

我花了几天时间尝试获得仅适用于现有值的“完美”自动完成功能....，可以选择诸如客户 id 之类的 id，从 mysql 数据库中选择数据而不是提供的值（我认为这是程序员想要的主要原因）。

为了清楚起见，我什至不确定某些行是做什么的。我刚刚从堆栈溢出的许多贡献者那里挑选了各种代码，并为自己进行了测试，直到我得到了我想要的。

加上最少的复杂性，这样程序员就有办法控制他们正在做的事情。

所以我们开始吧。

我的页面带有名为 details 的自动完成文本框，即 #particulars

测试.php

 <link rel="stylesheet" href="jquery-ui.css"type="text/css" media="screen" charset="utf-8"/>
 <script src="jquery-1.10.2.js"></script>
 <script src="jquery-ui.js"></script>




 <!------ MAKE autocomplete textbox and show all button and id text-box----->

 <input id="particulars"/> 
 <input id="showall" type = "button" Value = "Show all">
 <input style = "background:pink" ; id="creditor"/>
 <script src="particulars.js"></script>

 <!- make your id field (mine here called creditor) hidden!Mine is visible --->

你注意到我已经包含了一个文件 details.js 原因是我可以根据需要为不同的自动完成文本框保留文件的副本。因为我的自动完成是针对名为 details 的文本框，所以我包含的 js 文件是 details.js

细节.js

 var select = false;

 $("#particulars").autocomplete({
 source: function (request, response) {
    $.getJSON("pick_customers.php", {
        term: request.term
    }, response);
},

minLength: 0,
delay: 100,
autoFocus: true,
selectFirst: true,
open: function(event, ui) { if(select) select=false; },

focus: function(event, ui) {
   event.preventDefault();
   //$("#particulars").val(ui.item.label);
   },

select: function(event, ui) { select=true;
                             event.preventDefault();
                             $(this).val(ui.item.label);
                             $('#creditor').val(ui.item.value);
                             $('#showall').focus();
                              return false;
                            }
                                    })

    .blur(function(){
    if(!select) {
            $('#creditor').val("");
            $("#particulars").val($('ul.ui-autocomplete:eq(0) li:first a').text());


    }else {


            }
            });


     // a few additions
     $('#showall').on('click', function () {

                     $('#particulars').val("");
                      $('#creditor').val("");
                     $('#particulars').autocomplete('search' , '');
                     $('#particulars').focus();

                     return false;
                     });


       $('#particulars').on('focus', function () {
                     $('#particulars').autocomplete('search' ,$('#particulars').val());
                     return false;
                     });

现在是用于选择客户名称及其 id 的 php 文件

pick_customers.php

     <?php

      session_start();


 $term = trim($_GET['term']);

$dbHost = "localhost";
$dbUser = "root";
$dbPassword = "";



   $con = mysql_connect($dbHost,$dbUser,$dbPassword);
    if (!$con)   { die('Could not connect: ' . mysql_error()); }

  mysql_select_db("myTable", $con);

 $qstring = "SELECT customername,creditor FROM customers WHERE customername LIKE '%".$term."%' order by customername";
 $result = mysql_query($qstring);

    while($row = mysql_fetch_array($result)){
                    $arr['value'] = $row['creditor'];
                    $arr['label'] = $row['customername'];

                    $row_set[] = $arr;

    }

   echo json_encode($row_set);

   mysql_close($con);

    ?>

显然，远程数据必须编码为 json，据我所知，它不在自动完成文档中。此外，用于评估的数据作为“术语”传递，因此用于查询返回值以进行自动完成。

我希望这可以为某人节省大量的互联网搜索。这是我能做的最少的事情。带着感激之情。SO 几乎涵盖了 php/js/jquery 和其他一些事项。

于 2014-11-21T09:43:58.933 回答
0

Use select event. I mean you can determine how user entered value.

于 2013-05-14T07:18:28.687 回答