将输入框转换为下拉框以供jQuery自动完成使用

Question

这段代码已经正常运行。然而，我需要帮助使“input”标签显示为下拉框。我尝试将输入框样式设置为下拉框但并没有成功。我还在寻找一种通过动态构建选项来使用下拉框的方法。非常感谢任何和所有的帮助。

$(function () {
  var availableTags = new Array(1000000);
  var j = 0;
  for (var i = 1; i < availableTags.length; i++) {
    availableTags[j++] = i.toString();
  }
  $("#tags").autocomplete({
    source: function (req, responseFn) {

      var re = req.term;
      var matcher = new RegExp("^" + re, "i");
      var a = $.grep(availableTags, function (item) {
        return matcher.test(item);
      });
      responseFn(a.slice(0, 5));
    },
    select: function (event, ui) {
      if (ui.item && ui.item.value) {
        var titleinput = ui.item.value;
        ui.item.value = $.trim(titleinput);
        alert(ui.item.value);
      }
    },
    change: function (event, ui) {
      if (!valid) {
        // remove invalid value, as it didn't match anything
        $(this).val("");
        select.val("");
        return false;
      }
    }

  });
});

.custom-combobox {
  position: relative;
  display: inline-block;
  border-style: solid;
  border-width: 1px;
}
.custom-combobox-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  padding: 0;
}
.custom-combobox-input {
  margin: 0;
  padding: 5px 10px;  
}

/*
.custom-combobox-list-item {
  color: blue;
  font-weight: bold;
}
.custom-combobox-input , .custom-combobox-list-item.ui-state-focus {
  color: black;
  font-weight: bold;
  font-style: italic;
}
*/

#tags {
  width: 40px;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

<label for="tags">Tags: </label>
<input id="tags" type="text" class="custom-combobox" value="">

- Brono The Vibrator

---

请问您能否添加JSFiddle？ - Jot Dhaliwal

@JotDhaliwal：现在你可以在Stack Overflow中添加可运行的代码片段了：StackExchange Blog: Introducing Runnable JavaScript, CSS, and HTML Code Snippets - Mr. Polywhirl

@BronoTheVibrator：使用正确版本的jQuery和jQueryUI是可以的。确保它们兼容。 - Mr. Polywhirl

@BronoTheVibrator 如果你有百万行的数据，就不应该在纯JS中进行管理。将其存储在服务器端的数据库中，并在用户输入时向服务器发出ajax请求并在其中搜索。然后仅将结果发送回客户端。你可以使用select2来实现这一点，在select2页面上查看“Loading Remote Data”部分。 - Fenistil

数据用于确定要显示网格视图的哪一页。数据可能会增长到100万页码。我只需要处理数字作为数据。当前的旧代码可以正常工作，但是当前的组合框无法容纳大量数字，并且它不使用自动完成功能。实际上，数据都是数字，可能会增长到100万。如果您查看我发布的代码，100万个数字可以正常工作，这正是我要寻找的。我只需要让框看起来像一个组合框。 - Brono The Vibrator

Answer 1

经过研究，我发现Combo-Box-jQuery-Plugin是由dellsala编写的。

它是什么？

将<input type="text">转换为组合框。

自动完成

键盘控制

大多数样式可以通过CSS进行自定义

值列表可以动态更改

它是什么样子的？

为什么我建议这样做？

这不是为了扩展元素而设计的。许多其他jquery“组合框”插件更像是具有不同标签和每个选项的值的可搜索选择元素。该插件仅允许用户从现有文本值中选择或提供自己的值。如何使用？http://jsfiddle.net/csdtesting/eh0gse2f/ <div class="inputCombox"> <label for="input1">Field1:</label> <input id="input1" type="text" value="" /> </div> <div class="inputCombox"> <label for="input2">Field2:</label> <input id="input2" type="text" value="" /> </div> jQuery(function () { var varValue = 12; var aval = [ 'Yo', '1', 'Jo', varValue.toString()]; //#Example 1 jQuery('#input1').combobox(aval); //#Example 2 jQuery('#input2').combobox([ 'Yo', '1', 'Jo']); });

- Giannis Grivas

Answer 2

请检查一下，这可能有所帮助。

http://jqueryui.com/autocomplete/#combobox

http://demos.telerik.com/kendo-ui/combobox/cascadingcombobox

- Ritesh d joshi

---

jQuery UI 对我的 SharePoint 解决方案也适用。请检查我的答案，这是 jqueryui.com 页面的修改版本。http://sharepoint.stackexchange.com/a/129776/16880 - Iman

Answer 3

您可以使用datalist将选项传输到文本输入框，然后将其转换为组合框

我简化了您的代码，只保留了基本部分，以便提供简单的示例。

<label for="tags">Tags: </label>
<input id="tags" name="tags" type="text" list="options" class="custom-combobox" value="">

<datalist id="options">
    <!-- it puts the options here then the input type text gets them as select options -->
</datalist> 

$(function () {
  var availableTags = new Array(10);
  var j = 0;
  for (var i = 1; i < availableTags.length; i++) {
    $('#options').append("<option value='" + i + "'>");
  }

});

这里有一个展示基本功能的JSFIDDLE

- akaBase

---

这段代码在 JSFIDDLE 上对我无效。此外，它也无法满足要求。 - Brono The Vibrator

这段代码在JSFIDDLE上对我没有用。此外，它也不满足以下要求：1.自动完成应该每次显示五个项目。2.自动完成应该从左侧显示匹配字符的项目。数组应该能够容纳至少1,000,000个数字，并且非常响应迅速（如我的示例）。 - Brono The Vibrator

不需要Jquery UI... 你是一个邪恶的天才!! - T30

Answer 4

你需要这个吗？http://jqueryui.com/autocomplete/#combobox

非常简单，只是看看这是一个输入框，末尾带有一个锚点。

只需点击“查看源代码”即可看到它是如何实现的。

祝你好运！

- grubino

Answer 5

这里有一个快速解决方案，可以使您的输入框看起来像选择框。无需更改代码，只需要一些HTML/CSS。我将您的输入框设置为透明，并在其后面叠加了一个选择框。功能仍由您的输入框处理，但现在它看起来与选择框完全相同。

演示 - http://jsfiddle.net/sifriday/xy0mxst4/1/ 技巧 - 在HTML中使用以下代码：

<div id="wrapper">
  <select id="fake-tags"></select>
  <input id="tags" type="text" class="custom-combobox" value="" />
</div>

添加以下CSS样式可以使输入框显示在下拉框上方以处理功能：

#tags {
  width: 40px;
  border: 0;
  background: none;
  margin-left: -50px;
}
#tags:focus {
  outline: 0
}
#fake-tags {
  width: 50px;
}

这是一个技巧，但它非常简单，并且听起来可能正是你需要的 - 你已经有了可用的代码，你只需要让它看起来有些不同。

这是受到“好旧时光”的启发，当人们曾经在令人讨厌的默认浏览器控件上覆盖一个漂亮但虚假的文件上传控件。 默认控件承担实际工作，而虚假控件只提供漂亮的用户界面。现在我们有了FileAPI，人们不再经常这样做。

- sifriday

Answer 6

我将在文本框旁边放置一个可点击的向下箭头图像。如果用户点击图像而不是在文本框中输入数据，我将在列表框中显示1到10。

- Brono The Vibrator

Answer 7

尝试使用Bootstrap标签

$("#tags").tagsinput("Amsterdam,Washington,Los Angeles");

Bootstrap标签输入

- Yehia Elhawary

---

列表需要动态构建，而不是预先填充。 - Brono The Vibrator

你从哪里获取列表？ - Yehia Elhawary

JavaScript正在生成列表。我建议你运行代码并查看它的工作原理。 - Brono The Vibrator

@BronoTheVibrator：如果你想创建一个数字0-999,999的自动完成下拉列表，那么代码已经实现了这个功能... Underscore.js的range()函数是Python的一个端口。要构建你的数组，你只需要调用_.range(1000000) :-) - Mr. Polywhirl

是的，目前代码可以构建列表。但是它使用的输入标签看起来像一个输入框。我正在尝试让它看起来像一个组合框。我的问题是，我无法将其样式设置为组合框，并且当我将输入标签更改为选择标签时，无法使其正常工作。 - Brono The Vibrator

Answer 8

尝试使用select2。

要使用ajax调用填充Select2，请尝试以下操作：

PHP：

<?php
    $result = array();

    //Do something with the search string ($searchfor), eg. find the desired results
    $result[] = array('id' => '1', 'text' => '101');
    $result[] = array('id' => '2', 'text' => '102');
    $result[] = array('id' => '3', 'text' => '103');
    $result[] = array('id' => '4', 'text' => '104');
    $result[] = array('id' => '5', 'text' => '105');

    //Send the ajax results formatted as JSON
    print(json_encode($result));    
?>

HTML：

<input type="hidden" id="tags" value="" style="width: 300px;">
<script>
$('#tags').select2({
    minimumInputLength: 2,
    ajax: {
        url: 'http://yourdomain.com/ajax.php',
        dataType: 'json',
        type: "GET",
        quietMillis: 100,
        data: function (term) {
            return {
                searchfor: term
            };
        },
        results: function (data) {
            return {
                results: data
            };
        }
    }
});
</script>

- Fenistil

---

我不能使用预先创建的数据来填充它。就像在示例中一样，数据必须即时生成。当前的示例使用1,000,000个数字，这就是我要寻找的。Json解决方案对我不起作用。 - Brono The Vibrator

@BronoTheVibrator：根据您的请求进行了修改。 - Fenistil