Question

您好寻求有关如何在执行搜索时使我的代码不那么具体的帮助。现在，只有当用户输入的内容完全是如何存储时，它才会产生结果。因此，如果搜索词是全部大写的，那么用户必须在所有大写字母中输入...我确实使用了toLowerCase（）和toUpperCase（），这有助于允许单词大写或更低，但搜索仍然是太具体了。

我想要的是如果说我有Apple和Banana，如果我输入字母＆＃39; a＆＃39;或者＆＃39; A＆＃39;它应该在自动完成中显示两个结果。我愿意重构我的代码，但仍然希望它的工作方式相同。搜索实际上用于导航到不同的URL。因此，如果您输入“Google＆＃39;然后单击一个按钮，它将打开一个新选项卡并转到Googles主页。

$(document).ready(function(){

  $.ajax({url:"123.123.1.12:3000/index",
  success: function(data) {
     // console.log(data);

       $("input.autocomplete").autocomplete({
         minLength: 1,
         source: function(req, resp) {
           var q = req.term;
           var myResponse = [];

           $.each(JSON.parse(data), function(key, item) {

             if (item.value.indexOf(q) === 0 ) {
               //TODO: THIS MIGHT CAUSE BUGS
               item.value = item.value + ' ' + item.env;
               myResponse.push(item);
             }
             // console.log(item.value);
           });

           resp(myResponse);
         }, //end of source

         select: function(event, ui) {

           $('#goBtn').one("click", function(){

             if ($('#appsearch').val() === ""){
               console.log('search is empty');
             } else

             window.open(ui.item.url);
             $('#appsearch').val('');
             $('#alertText').text('');

           });
         }

       }); //end of $("input.autocomplete").autocomplete
   }, //end of success
 }); //end of ajax
});

Answer 1

由于您没有提供数据示例，因此很难提供完整的答案。考虑一下这个基本的例子：

$(function() {
  var projects = [{
      value: "jquery",
      label: "jQuery",
      desc: "the write less, do more, JavaScript library",
      icon: "jquery_32x32.png"
    },
    {
      value: "jquery-ui",
      label: "jQuery UI",
      desc: "the official user interface library for jQuery",
      icon: "jqueryui_32x32.png"
    },
    {
      value: "sizzlejs",
      label: "Sizzle JS",
      desc: "a pure-JavaScript CSS selector engine",
      icon: "sizzlejs_32x32.png"
    }
  ];

  $("#project").autocomplete({
    minLength: 0,
    source: function(req, resp) {
      var q = req.term;
      var results = [];
      $.each(projects, function(k, item) {
        var itm = item.label.toLowerCase();
        if (itm.indexOf(q.toLowerCase()) >= 0) {
          results.push(item);
        }
      });
      resp(results);
    },
    focus: function(event, ui) {
      $("#project").val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $("#project").val(ui.item.label);
      $("#project-description").html(ui.item.desc);
      return false;
    }
  });
});

#project-label {
  display: block;
  font-weight: bold;
  margin-bottom: 1em;
}

#project-description {
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="project-label">Select a project:</div>
<input id="project">
<p id="project-description"></p>

如果您需要调整或更改值，则可以。你得到结果后我会建议这样做。请记住，您的结果必须是数组。它可以包含具有{ label, value }和更多索引的对象。那两个索引必须在某处。

不太具体的jQuery UI Autocomplete，接受无序的术语

1 个答案: