Question

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

Answer 1

使用select event。我的意思是你可以确定用户输入的价值。

Answer 2

我花了几天时间试图获得一个完美的＆＃34;自动完成功能只适用于现有值....，可以选择客户ID等id，从mysql数据库中选择数据而不是提供的值（我认为这是程序员想要的主要原因）。

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

此外，复杂程度最低，因此程序员可以控制他们正在做的事情。

所以我们走了。

我的页面带有自动填充文本框，称为详情，即#particulars

test.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 --->

您注意我已经包含了文件particulars.js 原因是我可以随时为不同的自动填充文本框保留文件的副本。因为我的自动填充是针对名为particulars的文本框，所以我包含的js文件是particulars.js

particulars.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，我理解不存在自动完成文档。此外，评估数据也会传递给＆＃34;术语＆＃34;这就是用于查询返回值的内容自动完成。

我希望通过互联网为人们节省大量的精力。它至少我可以做到。带着感激之情。所以在php / js / jquery和其他一些事情上几乎都有。

在jQuery Autocomplete中，如果用户没有从可用列表中选择一个值，那么如何从可用列表中选择默认输入作为聚焦值？

2 个答案:

test.php的

particulars.js

pick_customers.php