如何引用函数的根元素？

huangapple
go评论93阅读模式
英文:

Jquery - how to refer to the root element of the function?

问题

这里我正在将jQuery的自动完成功能应用于我的页面上所有具有main-item类的文本框。

问题出在这一行：var search = ($this).val().toLowerCase();。我试图获取文本框的文本，但在这里$this只是指代了从ajax调用返回的数据。我该如何从调用此函数的$(".main-item")元素中获取文本？

  1. $(function () {
  2.     $(".main-item").autocomplete({
  3.         source: function( request, response ) {
  4.             $.ajax({
  5.                 url: "https://api.test.com",
  6.                 type: "GET",
  7.                 dataType: "xml",
  8.                 success: function (data) {
  9.                     var matches = [];
  10.                     // 在这里获取文本框的文本
  11.                     var search = $(this).val().toLowerCase();
  13.                     $(data).find("string").each(function () {
  14.                         var item = $(this).text();
  16.                         if (item.toLowerCase().indexOf(search) > -1) {
  17.                             matches.push(item);
  18.                         }
  19.                     });
  21.                     response(matches);
  22.                 },
  23.                 error: function (req, err) {
  24.                     console.log(req)
  25.                 }
  26.             });
  28.         },
  29.         minLength: 2,
  30.         select: function( event, ui ) {
  31.             $(".main-item").val(ui.item.value); 
  32.             $("span.input-group-btn > input").click();
  33.         }
  34.     });
  35. });
英文:

Here I'm applying jquery's autocomplete function to all the textboxes on my page with the main-item class.

The problem is on the line var search = ($this).val().toLowerCase(); I'm trying to get the text of the textbox, but here $this just refers to the data returned from the ajax call. How can I get the text from $( ".main-item" ) element that invoked this function instead?

  1. $(function () {
  2. 	$( ".main-item" ).autocomplete({
  3. 		source: function( request, response ) {
  4. 			$.ajax({
  5. 				url: "https://api.test.com",
  6. 				type: "GET",
  7. 				dataType: "xml",
  8. 				success: function (data) {
  9. 					var matches = [];
  10. 					var search = ($this).val().toLowerCase();
  12. 					$(data).find("string").each(function () {
  13. 						var item = $(this).text();
  14. 			  
  15. 						if (item.toLowerCase().indexOf(search) > -1) {
  16. 							matches.push(item);
  17. 						}
  18. 					});
  20. 					response(matches);
  21. 				},
  22. 				error: function (req, err) {
  23. 					console.log(req)
  24. 				}
  25. 			});
  27. 		},
  28. 		minLength: 2,
  29. 		select: function( event, ui ) {
  30. 			$(".main-item").val(ui.item.value); 
  31. 			$("span.input-group-btn > input").click();
  32. 		}
  33. 	});
  34. });

答案1

得分: 1

你应该使用jQuery::each()逐个处理每个文本框，并将文本框保存到变量以供以后使用。
请不要使用var，而是使用现代的const/let代替。

  1. $(function () {
  2.     $(".main-item").each(function(_, textbox){
  3.        
  4.         const $textbox = $(textbox);
  6.         $textbox.autocomplete({
  7.             source: function( request, response ) {
  8.                 $.ajax({
  9.                     url: "https://api.test.com",
  10.                     type: "GET",
  11.                     dataType: "xml",
  12.                     success: function (data) {
  13.                         const matches = [];
  14.                         const search = $textbox.val().toLowerCase();
  16.                         $(data).find("string").each(function () {
  17.                             const item = $(this).text();
  19.                             if (item.toLowerCase().indexOf(search) > -1) {
  20.                                 matches.push(item);
  21.                             }
  22.                         });
  24.                         response(matches);
  25.                     },
  26.                     error: function (req, err) {
  27.                         console.log(req)
  28.                     }
  29.                 });
  31.             },
  32.             minLength: 2,
  33.             select: function( event, ui ) {
  34.                 $textbox.val(ui.item.value); 
  35.                 // 这里可能有一个bug
  36.                 $("span.input-group-btn > input").click();
  37.             }
  38.         });
  39.     });
  40. });
英文:

You should handle each textbox individually with jQuery::each() and save a texbox to a variable for later use.
And please for god's sake don't use var, use modern const/let instead...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(function () {
  2.     $( &quot;.main-item&quot; ).each(function(_, textbox){
  3.        
  4.         const $textbox = $(textbox);
  6.         $texbox.autocomplete({
  7.             source: function( request, response ) {
  8.                 $.ajax({
  9.                     url: &quot;https://api.test.com&quot;,
  10.                     type: &quot;GET&quot;,
  11.                     dataType: &quot;xml&quot;,
  12.                     success: function (data) {
  13.                         var matches = [];
  14.                         var search = $textbox.val().toLowerCase();
  16.                         $(data).find(&quot;string&quot;).each(function () {
  17.                             var item = $(this).text();
  19.                             if (item.toLowerCase().indexOf(search) &gt; -1) {
  20.                                 matches.push(item);
  21.                             }
  22.                         });
  24.                         response(matches);
  25.                     },
  26.                     error: function (req, err) {
  27.                         console.log(req)
  28.                     }
  29.                 });
  31.             },
  32.             minLength: 2,
  33.             select: function( event, ui ) {
  34.                 $textbox.val(ui.item.value); 
  35.                 // you have a bug here maybe
  36.                 $(&quot;span.input-group-btn &gt; input&quot;).click();
  37.             }
  38.         });
  39.     });
  40.     
  41. });

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月22日 06:45:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76302224.html
  • jquery
  • jquery-ui
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定