我已使用以下链接集成了jQuery UI与Rails的自动完成功能:
http://www.lugolabs.com/articles/20-jquery-ui-autocomplete-with-ruby-on-rails
出于某种原因,我收到了这个错误:
Uncaught TypeError: Cannot set property '_renderItem' of undefined
at app.PopularSchools._initAutocomplete (inner_layout.self-7e73ad8….js?body=1:231)
at app.PopularSchools (inner_layout.self-7e73ad8….js?body=1:220)
at HTMLDocument.<anonymous> (inner_layout.self-7e73ad8….js?body=1:213)
at fire (jquery.self-bd7ddd3….js?body=1:3233)
at Object.fireWith [as resolveWith] (jquery.self-bd7ddd3….js?body=1:3363)
at Function.ready (jquery.self-bd7ddd3….js?body=1:3583)
at HTMLDocument.completed (jquery.self-bd7ddd3….js?body=1:3618)
我的application.js文件:
//= require inner_layout/jQuery-2.1.4.min
//= require rails-jquery-tokeninput
//= require inner_layout/bootstrap.min
//= require jquery_ujs
//= require inner_layout/jquery.mCustomScrollbar.concat.min
//= require inner_layout/app.min
//= require inner_layout/owl.carousel.min
//= require jquery.remotipart
//= require jquery-ui
//= require cocoon
//= require autocomplete-rails
//= require moment
//= require bootstrap-datetimepicker
//= require ../common_js/custom
//= require jquery-ui/widgets/autocomplete
//= require tinymce
//= require common_js/jquery.raty.js
//= require_self
完整的代码是:
$(function () {
new app.PopularSchools;
});
var app = window.app = {};
app.PopularSchools = function () {
this._input = $('#search-txt');
this._initAutocomplete();
};
app.PopularSchools.prototype = {
_initAutocomplete: function () {
this._input
.autocomplete({
source: 'popular_schools/get_all_schools',
appendTo: '#search-results',
select: $.proxy(this._select, this)
})
.autocomplete('instance')._renderItem = $.proxy(this._render, this);
},
_render: function (ul, item) {
var markup = [
'<span class="name">' + item.name + '</span>',
];
return $('<li>')
.append(markup.join(''))
.appendTo(ul);
},
_select: function (e, ui) {
$("#id").val(ui.item.id);
$("#type").val(ui.item.type);
this._input.val(ui.item.name);
return false;
}
};
修改:
每条评论添加<head></head>
内容:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon-fc4de0140d07a7fb9ab4f50fa2e0f48d215231c90c716a0109942cb07ec4459e.jpg">
<title>Site Title</title>
<link rel="stylesheet" media="all" href="/assets/common_css/bootstrap.self-8eed0a962b1f6cd0dee143c17da4398c45c23dda6b4a036e98cd700010aaa12e.css?body=1">
<link rel="stylesheet" media="all" href="/assets/common_css/bootstrap-flex.self-b3cbfd57f1adb9aa0f7d0bf99f76ef8eda3f57482eb4dfe5b0c7799f863bf4a5.css?body=1">
<link rel="stylesheet" media="all" href="/assets/jquery-ui.self-80de8350e5025ebca2c2899295a636ec9bd4608f09787334c5c92c102fff5939.css?body=1">
<link rel="stylesheet" media="all" href="/assets/token-input-facebook.self-5074a1bc7f07d8d2125d9c63eae7450c5ad544c9fdf8f29a016eb1ad704a738b.css?body=1">
<link rel="stylesheet" media="all" href="/assets/daterangepicker.self-3ac07b1b1cacfb4e8ec02be3bf11cbb672db20240ac86ea331391451e5fd2cdb.css?body=1">
<link rel="stylesheet" media="all" href="/assets/prettify.self-f2a5364acbaf236a6fd79eca52d2b47063b66aebb2381bb9688cfa40ae1246bf.css?body=1">
<link rel="stylesheet" media="all" href="/assets/jquery-ui/theme.self-830c3407ba1359ea36eee978235be14de5b78dacfa658a31226fe4f2b0faa7e7.css?body=1">
<link rel="stylesheet" media="all" href="/assets/jquery-ui/autocomplete.self-f0b810a4a7bb8c90994675d7c5bfe636d615a5785cf81cae3340aa5e6adc55ca.css?body=1">
<link rel="stylesheet" media="all" href="/assets/common_css/font-awesome.min.self-053e8e59e362ea6dfaaa1d47542e9ac73bb508aaa8a108e78a5af17c78b28f79.css?body=1">
<link rel="stylesheet" media="all" href="/assets/common_css/material-design-iconic-font.min.self-0721df3f25a30e97b682c1ae0404435c893068dd3b51ee6947a762965d419569.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/jquery.mCustomScrollbar.self-222a444a523a37f06879d29860c9757240e74d1770b219a6a9ad00676e9d3445.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/weevur.self-717c50da898a613886688634a4131f7a63b4b747feda890032a779e756263ead.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/weevur-theme.self-20b31bcd58caa9be715480411040758dd09ae37734ed64c06be62797e707a061.css?body=1">
<link rel="stylesheet" media="all" href="/assets/style.self-0acb00764e0eb2fad99b783ee67311c94aef7d46add583515a4d09cc8ee828e4.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/inner_layout.self-b57a4eaaabb432402eb122602acd085692f2d94eb274d1eabbfb06b2ce3b671e.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/_color-variable.self-a7d19b357431705284de31486cf7e915f9513f6e01633a475743b7252197b23f.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/owl.carousel.min.self-6570efd06433eaf06c957ee48fb13c1d97f89b239526aa5e4f1b8f9ca10ccbe1.css?body=1">
<link rel="stylesheet" media="all" href="/assets/inner_layout/owl.theme.self-3e80d06e340350c29e5ed031a85f9529dbea92d25d960ae4c7cfcd31ea1b722b.css?body=1">
<script src="https://js.pusher.com/3.2/pusher.min.js"></script>
<script>
var pusher = new Pusher('34c0cdbc218bac1d4dac', {
encrypted: true
});
var channel = pusher.subscribe('channel-' +70);
channel.bind('notification_event', function (data) {
$("#notification").fadeIn("slow").html(data.message + "<span class='dismiss'><a title='dismiss this notification'>X</a></span>");
$("#notification_drop").prepend("<li class='notices'><a href=" + data.url + ">" + data.message + "</a></li>");
$("span#notification_count").text(parseInt($('span#notification_count').text())+1);
$("span.badge").text(parseInt($('span.badge').text())+1);
$(".dismiss").click(function () {
$("#notification").fadeOut("slow");
});
});
</script>
<script src="/assets/inner_layout/jQuery-2.1.4.min.self-92bfaaece1eee1e40fd3b55441ee536e7f6a03242aa5fe10e2597a27103c9dae.js?body=1"></script>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery.tokeninput.self-b727cdd4b322bd427f485dd21b9248b710f4ce186350c53b3c35ef515264ed2d.js?body=1"></script>
<script src="/assets/rails-jquery-tokeninput.self-2b46449b4d53a7134ff76a0a5abaf2a66b3f223ce373498d131468ab6944c634.js?body=1"></script>
<script src="/assets/inner_layout/bootstrap.min.self-504d59678f10d79a661b6cecdce5b8c1d5bfd98e860614584c0a40399552d61f.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/inner_layout/jquery.mCustomScrollbar.concat.min.self-682cbac60ea68d85ee1d08249eb4c1a73b83e659f5ad8dde9406d06715d88b0b.js?body=1"></script>
<script src="/assets/inner_layout/app.min.self-7175e52be5d1868e9c02087f9030953eaadcb4c11b35feb69f48afa29e6b5ce5.js?body=1"></script>
<script src="/assets/inner_layout/owl.carousel.min.self-1a656d9fbdd97437fabb09a673bcfbd8dcd61704a72fe5ce95bd52799a9afab7.js?body=1"></script>
<script src="/assets/jquery.iframe-transport.self-b58640d2146e10a028d4aec4f1c6e624305f8b5edd02cbb5ca77f7fb56b4d976.js?body=1"></script>
<script src="/assets/jquery.remotipart.self-1660679e325ee534ce863e680eb6ad0bc9739d262594dc1337a2171e5c19c939.js?body=1"></script>
<script src="/assets/jquery-ui/version.self-c8e3d1203da26ea7efdf83c1eabb3f0ba55cb68e463f5ccf0d77bd15ce6a8e61.js?body=1"></script>
<script src="/assets/jquery-ui/data.self-2067c82e6fe39a9cba5623206a5dc28d5c60d26b95cd100855b78cacf72865b8.js?body=1"></script>
<script src="/assets/jquery-ui/disable-selection.self-5675f71f2fbbc6857ea700ba843af748b50dbc0150cc87932a7d05ec016bb659.js?body=1"></script>
<script src="/assets/jquery-ui/focusable.self-426e99e67d1f1bd4cb444fd878ee63a6de1f5d1d61451e43022c86214b9eec64.js?body=1"></script>
<script src="/assets/jquery-ui/form.self-711978b53107be2d9ef1b7369beb151b229cefa8c1405a056d3c34262d5b477e.js?body=1"></script>
<script src="/assets/jquery-ui/ie.self-163eb039dcb1e0c3471b7d91386eabb8753da6906e84824c019f9ff56bdb83a6.js?body=1"></script>
<script src="/assets/jquery-ui/keycode.self-ad63cd20acf49dd333bbbc537454d7d475bd610eb5b88de0dca009f0c3d314b1.js?body=1"></script>
<script src="/assets/jquery-ui/escape-selector.self-43e4d61501e4ffb1ecba387affbae1eb3e1c863ab0b0e71897851cddd246e50e.js?body=1"></script>
<script src="/assets/jquery-ui/labels.self-c0448a3cb597a9a9429be814ab0e9ed2a14d85604555b4cff897adf3f0415f38.js?body=1"></script>
<script src="/assets/jquery-ui/jquery-1-7.self-22c197e38fc01a29431530c4c5c7263e26d2b611994b1f9c5c8c900a97b4bc44.js?body=1"></script>
<script src="/assets/jquery-ui/plugin.self-d8f576c8e073ca51f095505f47bd09d306b875404cd90afcbb6338287cfb0247.js?body=1"></script>
<script src="/assets/jquery-ui/safe-active-element.self-a1f1a1a7dae3269ce03f6fffb2dcc9b4a7490f5d546c65d54417bec3be24b668.js?body=1"></script>
<script src="/assets/jquery-ui/safe-blur.self-2cc24c46132d51c7724f6371154241b0a81c9bae5d5681d8f62b01ce46236726.js?body=1"></script>
<script src="/assets/jquery-ui/scroll-parent.self-38e26a71a450a29fb63425e8f589a7046862f927eb0a1dbf6a6c44da05196d2e.js?body=1"></script>
<script src="/assets/jquery-ui/tabbable.self-f3f62ceed772d3a325cebd6a03221f8a8cb02c6150f4feba738c6525a2953690.js?body=1"></script>
<script src="/assets/jquery-ui/unique-id.self-66e85ac85cd0b6b8b1bb89369fc65f608f716869dc0930862a8d421a57a9580a.js?body=1"></script>
<script src="/assets/jquery-ui/core.self-886760af898381620a8980841c646ae70e894b5292c3138e6dfd75b6904deffb.js?body=1"></script>
<script src="/assets/jquery-ui/effect.self-776455da1682afff3a4974146aa96ca840597b879ed3797af0604063527443c6.js?body=1"></script>
<script src="/assets/jquery-ui/form-reset-mixin.self-3a447942586b5719fdd7f1d1a3ac0da9e757a0eb8f4a7cb145f6deb820d2dc54.js?body=1"></script>
<script src="/assets/jquery-ui/position.self-1b49c8c521e67a4a88bfdad6b4d944d33686d25009a0e40a1e170acdd7b6962a.js?body=1"></script>
<script src="/assets/jquery-ui/widget.self-fca20bcec06d192f97cffa6e734e24360e227237b8ae7d7e7e60754df7d5444f.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-blind.self-2f8923f5c3073717dad35ac1f9bd4dbc13d2f9c8128f7dbea9819921338271f4.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-bounce.self-ca3686abc7c667b5380422af36b618923c2fc8e901b3eb2ff627f1cdef60486a.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-clip.self-9e606afd1b0d1679f42b1ce5c2ad29f242ed98a9b1a473a9ef8a8bf10df2afe4.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-drop.self-481600061a28b5621b1d78187468e63f057665ce6af6401db851f9b79e345965.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-explode.self-b5f68a634df4bc19111474eb15bcd99597dc19c721b33647fbb04f2bb6d52ca3.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-fade.self-60febf4d2a1f6f013852a42da59c74d840f205715162a2b11e734fd4dd73a519.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-fold.self-78adc6cc7f2d8dac25e8c82164ae61cc3160bb5280ed3d24dd96a576e37a6e46.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-highlight.self-842a0db414abed8fbccb48908bd933b32c93c6b9d725160c85dc2bde708fa753.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-size.self-2094878ac7ba38dcd4539cd4595fa4d6ed7182be8bb6f03785684a5e470a293d.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-scale.self-88872e591cdbf30b3d09946e82e96e25bcd99b03857ead844a503301e6de71f3.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-puff.self-be0ba8a98762bf10054deb4e8bdf92c44de0d570714624d16c396f1ffe3a82d6.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-pulsate.self-bf83d1979be265f242fceb95cc3cfeca5467e4aab9cdea27ebb6f2e17bdaae2e.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-shake.self-867270f4e72f7895d38b10fdf9a6ba20f22bee88ac4d79654a9227c14141e1ca.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-slide.self-b59b0b36df7b3e5e4f4190ab51e5c212744d2b34d5ed14c96bfe9c8a3096c00b.js?body=1"></script>
<script src="/assets/jquery-ui/effects/effect-transfer.self-5ab6d30ecb0b73e2b9a528f6d66c0732ba43a93a5326d88dae547f0c7c759e79.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/accordion.self-267aabfe487e53fce0399a77f9030a87b9d8a409eb30c4c85c5637da9ac35429.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/menu.self-0730fe713007bd93e6db569352a20ed92448299505ff6f525bc0dc6dd488254e.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/autocomplete.self-6a89d7a43741ec810ef95de143a7c0297e2e4368ebecff64493ebb7a9ac3a524.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/controlgroup.self-0b7409f97114a33de116bd5429e9df199cbdea3f276d8bd725c4c2c60f244711.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/checkboxradio.self-60f68cb16012ef210c931076ada2d65d54a8c74a2dc71ce383af758460f8b686.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/button.self-659b51f6fb5303f90ed8cf551509063770a50168a15795ba834b08f8bf2e0ce0.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/datepicker.self-2af0dec09da99d687c31fc224e940687a4eb3694e7b38b0871bba475cad86120.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/mouse.self-f0790a202dcf54fab051e71b042335d5346f9cceb0f645223c1dab93f349a04b.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/draggable.self-42c3eda0b49f105628cea7580fe38c7ed77467cee384bb2c4e095a2bd0a172e6.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/resizable.self-1a46c2f5b876918e02bf979080e56f57846590cd880721bca5058e84f7f60bae.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/dialog.self-2bd687f9580c0be4213c50b4bb1211c28ceedb045eba954e63d40bfbb4d1affd.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/droppable.self-4e3be0d7524dd1852e3b37ae00cd0c351c6178bcad39b17315cca941ddd44148.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/progressbar.self-3bf965ce4e8ade2f07336ae5ffce7fe58897333238561761ffcb16f31af673fc.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/selectable.self-a364da09c555890f5bb64704711594a88e94988edb285735bda59431a749226e.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/selectmenu.self-43e0fc6b5fba037933a7d89a5b2a7127aa9c7494cc605c2dcd3146265e2d3d35.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/slider.self-f166e8b345d6a2376ab8f43b05ab7629016706df83f2d96113cf5d8905c3d028.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/sortable.self-6e5e1f07a29b5a89ec1d359363d2800904e3ae548a38ab2f8eded36746d1adbe.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/spinner.self-2769386b6b06e175a13ccdcd6d2d0cd40c45cec19607bcb818cee0704c165557.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/tabs.self-b7f60535e992224ca66c3f11dc943eba9ef42a9605241e27b9dba24c7efb287e.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/tooltip.self-50ae9488af573c99a78b60209bce5c7a4affc4e175fef523942acb163dd8deb8.js?body=1"></script>
<script src="/assets/jquery-ui.self-d4c1ae19d9b853ec1c8c83784fa979bbe4075a84932a080bbd7d7706240410e1.js?body=1"></script>
<script src="/assets/cocoon.self-6874ad698cefd21cc1119b773550f61b5c1a60396460f015222af59293affe80.js?body=1"></script>
<script src="/assets/autocomplete-rails.self-5d8d93a5f6e19ab6e682b9dd9999592b61ff3c3d69ea242a830a8556158001fa.js?body=1"></script>
<script src="/assets/moment.self-0da3eb4ebf8fb8c3113d89afb90e5b7a87760d21b5b39a405a51fe05c8e40fd8.js?body=1"></script>
<script src="/assets/bootstrap-datetimepicker.self-8b304d8493b536f56ff5f3a0cba6238693fb968d72400f3f794b7196c9f5a47f.js?body=1"></script>
<script src="/assets/common_js/custom.self-a29ebf4c7dcdfb350f3a879097b570cc1b032e4a8fb8115a235243ad937ea469.js?body=1"></script>
<script src="/assets/tinymce/preinit.self-84328a53e798df12f891eb49871773fd9f925439c8630e9e22423a82ef9e6f89.js?body=1"></script>
<script src="/assets/tinymce/tinymce.self-53684479d33d944177c9037e73854f0a1eb0fa64c5657dedcf4f1aa04b959145.js?body=1"></script>
<script src="/assets/tinymce.self-75a11da44c802486bc6f65640aa48a730f0f684c5c07a42ba3cd1735eb3fb070.js?body=1"></script>
<script src="/assets/common_js/jquery.raty.self-628421be04f36f7a8fa8b9b884c6d7824d6f8bdeba4f172b131f15aa63f713e8.js?body=1"></script>
<script src="/assets/inner_layout/inner_layout.self-d4064f8473922f8fa4cce0e23e1195e4f5d2cc1a4e55bdd3c981fbd7a10b27ea.js?body=1"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="TT0D01RZkj4Ox7IFyrBvPSXboqLHXdnJfRjrq5UNpnalRkODkR2icapP7DbWGNSiITNrGWo7h5uBxJW+xpmRVg==">
<link type="text/css" media="screen" rel="stylesheet" href="https://static.opentok.com/webrtc/v2.10.2/css/TB.min.css"></head>