不太具体 jQuery UI 接受未排序术语的自动完成

Question

您好，我想寻求帮助，了解如何在执行搜索时降低代码的具体性。现在，它只会在用户键入的内容与存储方式完全一致时才会产生结果。因此，如果搜索词全部大写，则用户必须将其全部大写等输入...我确实使用了 toLowerCase() 和 toUpperCase() ，这有助于允许单词大写或更小，但搜索仍然是太具体了。

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

$(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 接受未排序术语的自动完成

Less specific jQuery UI Autocomplete that accepts un-ordered terms

jquery

jquery-ui

jquery-ui-autocomplete