Javascript 如何在jQuery'；什么是自动完成列表？

我有一个简单的jQuery代码来设置自动完成功能：

$(document).ready(function() {
  fInitApp();
});

function fInitApp(){
  $("#myList").autocomplete({
    minLength: 2,
    /*.....,*/
    dataType : "json"
  });
}

HTML

如果可以添加此底部项目，那么我可以只滚动建议列表而不滚动底部项目吗？i、 e:

[sugg    ]
        ^
   suggestion 1
   suggestion 2
   suggestion 3
   suggestion 4
        v
   ------------
   my custom link

---

您可以覆盖自动完成的

\u renderMenu

方法。例如：

/* saves the current behavior of _renderMenu */
var render = $('#myList').autocomplete('instance')._renderMenu;

/* overrides the default method */
$('#myList').autocomplete('instance')._renderMenu = function(ul, items) {
  /* adds your fixed item */
  items.push({ label: 'my custom link', value: 'my custom link' });
  /* calls the default behavior again */
  render.call(this, ul, items);
};

---

我为你树立了一个榜样。开始键入“co”，您将看到

COBOL

和

ColdFusion

，但您将看到最后一个固定项

ES 2015

。如果您开始键入“jav”等，也会发生同样的情况。请看：

$（文档）.ready（函数（）{
fInitApp（）；
});
函数fInitApp（）{
$（'#myList'）。自动完成({
最小长度：1，
资料来源：[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
],
数据类型：“json”
});
var render=$（“#myList”）.autocomplete（'instance'）。\u renderMenu；
$（“#myList”）.autocomplete（'instance'）。\u renderMenu=function（ul，items）{
推({
标签：“ES 2015”，
价值：“ES 2015”，
最后：是的
});
提供.调用（本、ul、项目）；
};
var renderItem=$（“#myList”）.autocomplete（'instance'）。_renderItem；
$（“#myList”）.autocomplete（'instance'）。_renderItem=function（ul，item）{
如果（最后一项）{
setTimeout（函数（）{
ul.find（'li:last child'）.css({
位置：'固定'，
顶部：ul.offset（）.top+（ul[0]。scrollHeight==ul[0]。clientHeight？ul.offset（）。高度：ul[0]。clientHeight），
左：ul[0]。style.left，
宽度：“计算（145px-1.4em）”，
边框：“1px实心#CCC”，
borderTop:'2px实心#999'，
背景颜色：“#ffefe”
});
}, 0);
}
返回renderItem.call（此，ul，项目）；
};
}

.ui自动完成{
最大高度：125px；
溢出y：自动；
溢出x：隐藏；
}

---

您可以覆盖自动完成的

\u renderMenu

方法。例如：

/* saves the current behavior of _renderMenu */
var render = $('#myList').autocomplete('instance')._renderMenu;

/* overrides the default method */
$('#myList').autocomplete('instance')._renderMenu = function(ul, items) {
  /* adds your fixed item */
  items.push({ label: 'my custom link', value: 'my custom link' });
  /* calls the default behavior again */
  render.call(this, ul, items);
};

---

我为你树立了一个榜样。开始键入“co”，您将看到

COBOL

和

ColdFusion

，但您将看到最后一个固定项

ES 2015

。如果您开始键入“jav”等，也会发生同样的情况。请看：

$（文档）.ready（函数（）{
fInitApp（）；
});
函数fInitApp（）{
$（'#myList'）。自动完成({
最小长度：1，
资料来源：[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
],
数据类型：“json”
});
var render=$（“#myList”）.autocomplete（'instance'）。\u renderMenu；
$（“#myList”）.autocomplete（'instance'）。\u renderMenu=function（ul，items）{
推({
标签：“ES 2015”，
价值：“ES 2015”，
最后：是的
});
提供.调用（本、ul、项目）；
};
var renderItem=$（“#myList”）.autocomplete（'instance'）。_renderItem；
$（“#myList”）.autocomplete（'instance'）。_renderItem=function（ul，item）{
如果（最后一项）{
setTimeout（函数（）{
ul.find（'li:last child'）.css({
位置：'固定'，
顶部：ul.offset（）.top+（ul[0]。scrollHeight==ul[0]。clientHeight？ul.offset（）。高度：ul[0]。clientHeight），
左：ul[0]。style.left，
宽度：“计算（145px-1.4em）”，
边框：“1px实心#CCC”，
borderTop:'2px实心#999'，
背景颜色：“#ffefe”
});
}, 0);
}
返回renderItem.call（此，ul，项目）；
};
}

.ui自动完成{
最大高度：125px；
溢出y：自动；
溢出x：隐藏；
}

您可以使用“响应”事件。有关更多信息，请参阅

您可以使用“响应”事件。有关更多信息，请参阅

---

能否创建stacksnippets进行演示？能否创建stacksnippets进行演示？谢谢。。它真的很管用。。但我真的需要通过添加分隔线、着色或字体更改来设置最后一项的样式。这很简单，您可以覆盖

\u renderItem

方法来实现这一点。@VladP-Np，伙计！如果我的回答对你有用，请投上一票如果列表中有滚动条，则会出现问题。。因此，最后一项“ES 2015”被隐藏。看看我最初的问题。我需要显示“ES 2015”，无论滚动bar@VladP我已经做了一个变通办法，所以，花时间去理解它，然后，编辑它，使它看起来像你想要的方式！如果我的答案对你有用的话，请把它标记为被接受的答案。谢谢！：）非常感谢。它真的很管用。。但我真的需要通过添加分隔线、着色或字体更改来设置最后一项的样式。这很简单，您可以覆盖

\u renderItem

方法来实现这一点。@VladP-Np，伙计！如果我的回答对你有用，请投上一票如果列表中有滚动条，则会出现问题。。因此，最后一项“ES 2015”被隐藏。看看我最初的问题。我需要显示“ES 2015”，无论滚动bar@VladP我已经做了一个变通办法，所以，花时间去理解它，然后，编辑它，使它看起来像你想要的方式！如果我的答案对你有用的话，请把它标记为被接受的答案。谢谢！：）

/* saves the current behavior of _renderMenu */
var render = $('#myList').autocomplete('instance')._renderMenu;

/* overrides the default method */
$('#myList').autocomplete('instance')._renderMenu = function(ul, items) {
  /* adds your fixed item */
  items.push({ label: 'my custom link', value: 'my custom link' });
  /* calls the default behavior again */
  render.call(this, ul, items);
};

//add option in autosuggest list, that would be shown on every search even if search result is null.
$("#myList").autocomplete({
    response: function (event, ui) {
        ui.content.push({ label: "my custom link", value: "my custom link"});
    }
});