Question

此代码运行正常。但是，我需要帮助获得＆＃34;输入＆＃34;标签显示为组合框。我试图将输入框设计为组合框而没有成功。我也在寻找一种通过动态构建选项使代码与组合框一起工作的方法。任何和所有的帮助表示赞赏。

＆＃13;

$(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;
      }
    }

  });
});

＆＃13;

.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;
}

＆＃13;

<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="">

＆＃13;

Answer 1

您可以使用datalist将选项转移到text input，然后将其转换为combobox

我简化了你的代码，写下了基础知识来做一个简单的例子。

<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

Answer 2

经过研究后，我发现Combo-Box-jQuery-Plugin撰写了dellsala。

这是什么？

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

autocomplete
键盘控件
大部分款式可以通过css
值列表可以动态更改

看起来如何？

enter image description here

为什么我建议？

这不适用于扩展<select>元素。许多其他jquery＆＃34;组合框＆＃34;插件的行为更像是可搜索的选择元素，每个选项都有不同的标签和值。 此插件只允许用户从现有文本值中进行选择或提供自己的文本值。

如何使用？ 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']);     
});

Answer 3

请检查这可能会有所帮助

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

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

Answer 4

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

这很简单，看看它是一个输入，最后有一个锚点。

只需点击“查看来源”即可查看其实施方式。

祝你好运！

Answer 5

尝试引导标记

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

Bootstrap Tags Input

Answer 6

尝试使用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>

Answer 7

这是一个快速的解决方法，让你的inout看起来像一个选择。不需要更改代码，只需要一些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以使输入显示在select上方以处理功能：

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

这是一个黑客，但它是一个超级简单的，它听起来可能只是你需要的 - 你已经有了工作代码，你只需要它看起来有点不同。

这是受到'美好的旧日'的启发，当时人们常常在令人讨厌的默认浏览器之上叠加一个漂亮但虚假的文件上传控件。默认做了真正的工作，假的只是提供了漂亮的用户界面。由于我们拥有FileAPI，人们不会这么做。

Answer 8

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

将输入框转换为组合框以进行jQuery自动完成

8 个答案: