标签: jquery-ui-autocomplete

我正在研究使用jQuery UI自动完成小部件来实现用姓或名的用户查找.看起来默认情况下,自动完成按字符序列查找单词,无论它出现在单词中.因此,如果您有以下数据:javascript, asp, haskell并且您输入了,'as'那么您将获得所有这三个数据.我希望它只匹配单词的开头.所以在上面的例子中你只得到'asp'.有没有办法配置自动完成小部件来执行此操作？

最终,通过 Gmail中的名字或姓氏开头匹配会更好.

注意:我正在尝试使用jQuery UI小部件专门找到一种方法.由于我已经在我的项目中使用jQuery UI,我计划坚持使用它并尝试不向我的Web应用程序添加额外的库.

我在模式对话框引导程序中的jQuery自动完成中有显示问题.

当我鼠标滚动时,结果不会保持附加到输入.

有办法解决这个问题吗？

在这里JsFiddle:

.ui-autocomplete-input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
  z-index: 1511;
  position: relative;
}

编辑 我发现了问题:

.ui-autocomplete {
  position: fixed;
  .....
}

如果模态滚动,问题仍然存在!

这里是JsFiddle/1.

这似乎是一个黑洞:经过一个小时的搜索jQuery UI网站,Stack Overflow和谷歌搜索,我还没有找到如何编写AutoComplete 服务器端的最基本信息.

什么参数传递给服务器以及JSON响应应该是什么样的？

我一定错过了什么,因为其他人怎么学会这样做？站点似乎只讨论客户端JavaScript代码,而不是协议或服务器端示例.

我需要足够让最简单的远程示例工作.

我正在尝试使用jQuery UI Autocomplete来显示MySQL数据库中的人员名单.基本功能正在运行 - 当您键入两个或更多字母时,会显示可能的名称列表 - 但是当我将鼠标悬停在列表上或按下向下键以访问列表时,它会消失(下面的2个屏幕截图可能有助于解释一下).

这意味着自动完成变得毫无意义,因为我实际上无法访问列表!如果有人可以提供帮助,我会非常感激!屏幕截图和代码发布在下面.

输入前几个字符,然后会出现菜单

但是,将鼠标悬停或按下"向下"键,它就会消失,然后才能进行选择

HTML:

  <div id="chooseaccount">
  Choose Account to Edit
  <div id="iechooseaccountlabel" class="labeldiv">
    <!--[if IE]>
     Enter Student Name
    <![endif]-->
   </div>

  <input type="text" class="inputs" id="editname" placeholder="Enter Student Name" />

  </div>

jQuery的:

$(document).ready(function(){

$("#editname").autocomplete({
 source: "names.php",
 minLength: 2,
});

});

PHP:

<?php  

$mysqli = new mysqli('********', '********', '**********', '*********');
$text = $mysqli->real_escape_string($_GET['term']);

$query = "SELECT name FROM users WHERE name LIKE '%$text%' ORDER BY name ASC";
$result = $mysqli->query($query);
$json = '[';
$first = true; …

我在我的一个表单中使用JQuery Autocomplete.

基本表单从我的数据库中选择产品.这很好用,但我想进一步开发,以便只返回从某个邮政编码发货的产品.我找到了后端脚本.我只需要找出将zipcode传递给此脚本的最佳方法.

这是我的表单看起来的样子.

<form>

<select id="zipcode">

<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="4000">4000</option>

</select>

<input type="text" id="product"/>

<input type="submit"/>

</form>

这是JQuery代码:

$("#product").autocomplete
({
     source:"product_auto_complete.php?postcode=" + $('#zipcode').val() +"&",
     minLength: 2,
     select: function(event, ui){

                             //action

                                 }
});

此代码在某种程度上起作用.但只返回第一个zipcode值,无论实际选择哪个值.我想发生的事情是源URL是在页面加载时启动而不是在更改选择菜单时.有没有解决的办法？或者总体上有更好的方法来实现我追求的结果吗？

我需要一些关于如何在我的Rails应用程序中实现jquery-ui自动完成的帮助.

我想将自动填充添加到用户可以输入客户名称的文本字段中.由于可能有数百个客户,我需要从表中"远程"拉出建议的自动完成值(至少这是我所理解的).

我无法理解的要点是如何为自动完成文本框提供建议值.我已经阅读了jquery-ui文档,但在这个问题上我似乎有点密集.

所以我真正追求的是一个如何在Rails应用程序中使用它的示例,不一定是javascript如何构建的完整描述(这就是jquery-ui团队为我做的事情=)).

例如,如何为自动完成准备数据,以及如何将自动完成功能附加到文本框.

我有以下脚本,它与1维数组一起使用.是否可以使用二维数组？然后,无论选择哪个项目,通过单击页面上的第二个按钮,都应显示选择的项目的ID.

这是具有1维数组的脚本:

var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
$("#txtAllowSearch").autocomplete({
    source: $local_source
});

这是用于检查id的按钮的脚本,该脚本不完整:

$('#button').click(function() {
    // alert($("#txtAllowSearch").someone_get_id_of_selected_item);
});

使用jQuery 2.1.0和jQuery.ui 1.11.0在iOS 7中测试.iPhone和iPad Mini.适用于Android和常规浏览器.

问题

我们最近从jQuery UI 1.10.0升级到1.11.0,现在,当点击自动完成结果列表中的项目时,您只能获得悬停,您必须再次单击相同的元素才能获得点击事件.这曾经适用于版本1.10.0.

(评论中的JSFiddle链接)

什么行不通

使用CSS {cursor: pointer}不起作用

使用onclick=""不起作用

(评论中的JSFiddle链接)

奇怪的部分

但这里有趣/奇怪的部分.它适用于JSFiddle 编辑视图,但不适用于JSFiddle"/ show"页面.

JSFiddles :( 键入一个字母显示结果"s"是一个很好的)

• Html视图(不起作用)

• 编辑视图(工作)

我已经在这方面工作了好几天,但在测试只有html视图之前无法在JSFiddle中重现它.所以现在我转向你.我不能为我的生活弄清楚为什么一个页面触发点击事件,而另一个页面没有.

我正在使用jQuery自动完成的最基本功能.实际上,使用jQuery UI主页上显示的完全相同的代码.

这个问题

那么,如何在/ show页面上单击iOS中的一次点击才能获得自动完成功能？

(我会在评论中发布其他链接,因为我还没有10个代表.除非我没有足够的代表评论......)

小提琴

我想样式自动完成内部的部分,但我不知道要放什么东西在CSS 的章节.我特意想做:

color: #96f226;
border-radius: 0px;
border: 1px solid #454545;

有什么建议？？？

我在对话框中遇到了一个有趣的jQueryUI自动完成问题.

我的对话框HTML如下所示:

<div id="copy_dialog">
    <table>
        <tbody>
            <tr>
                <th>Title:</th>
                <td><input type="text" class="title" name="title"></td>
            </tr>
            <tr>
                <th>Number:</th>
                <td><input type="text" name="number"></td>
            </tr>
        </tbody>
    </table>
</div>

当我在上面的HTML上运行jQueryUI自动完成时,它完美无缺.

当我用对话框打开它时

$('#copy').click(function()
{
    $('#copy_dialog').dialog({
        autoOpen: true,
        width: 500,
        modal: false,
        zIndex: 10000000,
        title: 'Duplicate',
        buttons: {
            'Cancel': function()
            {
                $(this).dialog('close');
            },
            'Save': function()
            {
                $(this).dialog('close');
            }
        }
    });

    return false;
});

然后在FireBug中,我可以看到自动完成仍然有效.它正在请求和接收结果,但我不再在输入字段下方看到选项列表.

我的想法是,这与对话框上的zIndex有关,远远大于自动完成菜单提供的内容,但我不确定.我还在研究正在发生的事情的确切细节,但我希望有人能在这里找到我的想法.

编辑 我尝试从对话框中删除zIndex,我的自动完成开始显示.不幸的是,我需要zIndex值来克服菜单栏的可怕高zIndex,我无法改变(无法访问代码的那个区域).因此,如果有一种方法可以将zIndex添加到自动完成中,那就太棒了; 在那之前,我可能只是从对话框中删除zIndex,并确保它不会出现在菜单栏区域周围.