标签: jquery-ui-autocomplete

我使用维基百科的API有一个简单的维基百科自动完成.

目前它正在使用jQuery自动完成插件,我想使用jQuery UI.

有人可以指导我吗？

这是使用插件的工作演示的小提琴:http: //jsfiddle.net/VjLnv/

这是JS:

function attachWikiAutoComplete(expression) {
    $("#artist").autocomplete("http://en.wikipedia.org/w/api.php",  {
        dataType: "jsonp", 
        parse: function(data) { 
            var rows = new Array(); 
            var matches = data[1];
            for( var i = 0; i < matches.length; i++){ 
                rows[i] = { data:matches[i], value:matches[i], result:matches[i] }; 
            } 
            return rows;
        },
        formatItem: function(row) { return row; }, 
        extraParams: {
            action: "opensearch", 
            format: "json", 
            search: function () { return $("#artist").val() } }, 
        max: 10 
    });
}

非常感谢

这是我在以下 JS Fiddle 中总结的问题：http : //jsfiddle.net/sidou/3R5B2/

我需要创建一个具有多个值的自动完成字段（在附加脚本的第一部分中正确完成），但我也希望它在获取与输入字符串相比的自动完成建议时不区分重音（正如它在附加脚本的第二部分）。

如何合并这两种行为？或者换句话说，如何在保持多值选择功能的同时简单地使第一个自动完成字段重音不敏感。

您可以通过输入“caféteria”一词来尝试

谢谢

如果我在框中键入搜索,则会出现自动完成菜单,当它失去焦点时,它会按预期消失.搜索项保留在框中,但是当它重新获得焦点时,自动完成菜单不会重新出现.

如果搜索框中当前有搜索字词,如何重新显示自动填充菜单？

如何将 jquery ui 自动完成创建的菜单中所选选项的值获取到变量中？

有没有办法可以强制jQueryUI自动完成显示数据标签而不是数据值:

例如

[{ "标签": "姓名", "值": "1"},{ "标签": "NAME3", "值": "6"},{ "标记": "NAME1", "值": "8"},{ "标签": "NAME2", "值": "10"}]

$( ".auto-search" ).autocomplete({
    minLength: 2,
    dataType: 'json',
    source: tempJson,
    focus: function(event, ui){
        $('input[name="user-name"]').val(ui.item.label);
    },
    select: function (event,ui){
        $('input[name="user-name"]').val(ui.item.label);
        $('input[name="user-id"]').val(ui.item.value);
        return false;
    }
})

按下向下按钮时,上面的代码显示的是值而不是标签.可以更改以显示标签吗？

如果只有一个输入字段，则自动完成工作得很好。但就我而言，我必须生成输入字段。所以无论如何这是我的代码。

HTML 部分

<div class="clonedInput" id="input1">
    <div class="row" id="items">
     <div class="col-md-4">
      <div class="form-group">
        <div class="input-group">
         <span class="input-group-btn">
         </span>
         <input type="text" id="sug_input" class="form-control" name="title"  placeholder="Search for product name">
        </div>
        <div id="result" class="list-group result"></div>
      </div>
     </div>
    </div>
</div>
<input type="button" id="btnAdd" value="add another item" />
<input type="button" id="btnDel" value="remove item" />

脚本部分

<script type="text/javascript">
    $('#btnAdd').click(function() {
    var num        = $('.clonedInput').length;    // how many "duplicatable" input fields we currently have
    var newNum    = new Number(num + 1);        // the numeric ID of the …

我想同时使用 Vue.js 和 jQuery 来动态显示自动完成字段。

new Vue({
  el: "#el",
  data: {
    toggle: false
  }
});

var tags = [
  "ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion",
  "Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python",
  "Ruby","Scala","Scheme"
];

$("#autocompleteSearch").autocomplete({
  source: tags
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="el">
  <input v-if="toggle" id="autocompleteSearch" type="search">
  <button @click="toggle=!toggle">Toggle</button>
</div>

如您所见，由于v-if输入的原因，它无法工作。如果我删除v-if它，它可以工作，但它不会动态显示。我应该怎么做？

我在应用程序的多个位置上使用了jQuery自动完成功能，包括带有url的表单：

http://www.fonsiuris.net/fr/administration/actes/nouveau/122

应用程序/视图/管理/行为表单具有以下字段：

http://www.fonsiuris.net/fr/administration/actes/nouveau/122

在routes.rb中：

<%= lieux.text_area :place, :value =>  params[:acte] ? @place["place"] : "", class:"field_places", data: {autocomplete_source: lieux_enum_path} %>

这是我的routes.rb的第一个URL

但是，当我在文本区域中键入字母时，例如具有自动完成功能的“ Dou”，它将指向此url：

http://www.fonsiuris.net/fr/biblios/trouver?utf8=?&ch_bib[aut_titre_cherche]=Douai&commit.x=6&commit.y=2&term=Dou

当我输入多个术语时，该术语会像这样添加到网址中：

/fr/biblios/trouver?utf8=%E2%9C%93&ch_bib%5Baut_titre_cherche%5D=Douai&commit.x=5&commit.y=11&term=Paris

（都将杜埃岛和巴黎都添加为搜索词）

它应该指向这个URL：

http://www.fonsiuris.net/lieux/enum?term=Dou

给出正确的结果。我在应用程序的多个位置使用了相同的代码，并且使用了相同的javascript，并且在其他所有地方都可以正常使用！

的输出rails routes | grep enum是：

                          lieux_enum GET    /lieux/enum(.:format)                                          lieux#enum
                       motclefs_enum GET    /motclefs/enum(.:format)                                       motclefs#enum
                 actes_enum_acte_mot GET    /actes/enum_acte_mot(.:format)                                 actes#enum_acte_mot
                    biblios_enum_rec GET    /biblios/enum_rec(.:format)                                    biblios#enum_rec
        administration_archives_enum GET    /administration/archives/enum(.:format)                        administration/archives#enum_archive
         administration_biblios_enum GET    (/:locale)/administration/biblios/enum(.:format)               administration/biblios#enum_titres {:locale=>/fr|en|nl|it/}
         administration_auteurs_enum GET    (/:locale)/administration/auteurs/enum(.:format)               administration/auteurs#enum_noms {:locale=>/fr|en|nl|it/}

到目前为止我尝试过的是：

• 重新加油路线
• 重写form.html.erb，使其包含与我的应用程序可以正常工作的其他地方完全相同的代码
• 在各处使用相同的JavaScript
• 重新安装jquery和jquery-ui：现在使用cdn代替gem-没有任何区别。

我不知道从哪里开始寻找解决方案。

我有这个数组

["ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"]

我已经在这里复制了它：https : //jsfiddle.net/bheng/Lsubhxmv/

当我键入"P"-我看到此列表

预期结果

console.log(matchedValues), I should see ['ActionScript','AppleScript','Asp','Lisp','Perl','PHP','Python']

我"Py"只要输入一次

预期结果

console.log(matchedValues), I should see ['Python']

我需要根据用户当前输入以编程方式访问匹配值列表。

我遇到了麻烦,因为我从db(mysql)中获取了一些文本,该文本应该填充自动完成但是从db中检索它,现在当我想使用自动完成的文本时不起作用,我需要在不使用自动完成的情况下获取文本的id(ui.item.id),我认为它是一个触发自动完成(.bind)的事件的问题,但我不知道如何修复,任何建议请帮助？我被卡住了

这是我的代码:

var ids = [];
$(function() {
    function split(val) {
        return val.split(/,\s*/);
    }

    function extractLast(term) {
        return split(term).pop();
    }

    $("#txtdestino_Email").bind("keydown", function(event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    }).autocomplete({
        source: function(request, response) {
            $.getJSON("../../correo/controller/controllerAutocomplete.php", {
                term: extractLast(request.term)
            }, response);
        },

        focus: function() {
            return false;
        },
        select: function(event, ui) {
            var terms = split(this.value);



            terms.pop();
            // add the selected item
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join(",");

            ids.push(ui.item.id); …