Html CSS-具有动态内容的柱状flex box_Html_Jquery_Css_Flexbox

Html CSS-具有动态内容的柱状flex box

html jquery css

Html CSS-具有动态内容的柱状flex box,html,jquery,css,flexbox,Html,Jquery,Css,Flexbox,我正在使用为用户输入提供建议。我总是有一个构建的描述，对于其中一些，我也有一个捷径。他们都在div中，这是表单中的一个建议。两者的长度都是动态变化的。我想display:flex是一个好的开始。但我面临两大问题如果我有很长的描述，建议容器会随着实际输入字段的增加而变大（两者的宽度应该相同）无论我是否有此建筑的快捷方式，说明都应具有相同的对齐方式我使用了justify content:space-between用于间距。但是最后一个flex元素的浮动在右边。这看起来有点难看，我想把它们左

我正在使用为用户输入提供建议。我总是有一个构建的描述，对于其中一些，我也有一个捷径。他们都在

div

中，这是表单中的一个建议。两者的长度都是动态变化的。我想

display:flex是一个好的开始。但我面临两大问题
如果我有很长的描述，建议容器会随着实际输入字段的增加而变大（两者的宽度应该相同）

无论我是否有此建筑的快捷方式，说明都应具有相同的对齐方式

我使用了justify content:space-between用于间距。但是最后一个flex元素的浮动在右边。这看起来有点难看，我想把它们左对齐
我想知道是否可以用flexbox来实现这一点
下面是一个例子来说明我的问题。（键入buil以触发自动完成）
如果描述太长，字体大小应该自动减小，链接中断也可以
HTML:
JS:
$（函数（）{
var项目=[
{
“短”：“AB 123”，
“长”：“建筑A”
},
{
“短”：“短”，
“长”：“没有ID的建筑”
},
{
“短”：“AAAA”，
“长”：“具有5个ID数字的建筑物”
},
{
“短”：“AB”，
“长”：“这座建筑有一个很长的名字”
},
{
“短”：“A1”，
“长”：“短名称”
}
]
lightwell功能（请求、响应）{
函数hasMatch（s）{
返回s.toLowerCase（）.indexOf（request.term.toLowerCase（））！=-1；
}
变量i、l、obj、matches=[]；
if（request.term==“”）{
答复（[]）；
返回；
}
对于（i=0，l=projects.length；我为什么不使用css网格呢？如果你需要控制行或列的宽度和高度，css网格是比flexbox更好的解决方案。为什么不使用css网格呢？如果你需要控制行或列的宽度和高度，css网格是比flexbox更好的解决方案。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<meta charset="UTF-8">

<body>

<div class="search_box">
<form autocomplete="off">
<div class="autocomplete">
  <input type="text" id="nameSearch" class="nameSearch" placeholder="Suche">
</div>
</form>
</div>

<script src="js.js"></script>
</body>

.search_box {
    width: 380px;
    position: fixed;
    left: 20px;
    top: 94px;
    z-index: 20000;
    box-shadow: 0 2px 4px 0 rgba(26, 45, 51, 0.3);
    border-radius: 10px;

}


.nameSearch {
    float: left;
    width: 100%;
    height: 50px;
    text-indent: 50px;
    color: #2d4a59;
    font-size: 1em;
    border: solid 1px rgba(45, 74, 89, 0.5);
    border-radius: 10px;
    outline: none;
    padding: 0;
}



.ui-autocomplete {
  position: fixed;
  top: 100%;
  left: 0;
  z-index: 9999;
  display: none;
  float: left;
  font-family: Arial sans-serif;
  color: #2d4a59;
  font-size: 14px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  text-align: left;
  background-color: #ffffff;
  border: solid 1px rgba(45, 74, 89, 0.5);
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 4px 0 rgba(26, 45, 51, 0.3);
  box-shadow: 0 2px 4px 0 rgba(26, 45, 51, 0.3);
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}


.ui-autocomplete > li > div{
  display: block;
  padding: 12px 43px;
  clear: both;
  line-height: 1.42857143;
  white-space: nowrap;
  font-family: Arial;
}


.ui-menu .ui-menu-item-wrapper:hover, .ui-menu .ui-menu-item-wrapper.ui-state-active {
    background-color: #278096;
    color: white;
    border: none;
}


.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.ui-autocomplete > .each > .acItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 12px 43px;
  clear: both;
  line-height: 1.42857143;
  white-space: nowrap;
  font-family: Arial;
  width: 100%;
}

.label {
    font-weight: bold;
}

$(function() {
    var projects = [
        {
            "short": "AB 123",
            "long": "Building A"
        },
        {
            "short": "",
            "long": "Building with no ID"
        },
        {
            "short": "AAAAA",
            "long": "Building with 5 ID digits"
        },
        {
            "short": "AB",
            "long": "This building has a very very very very very very very very long name"
        },
        {
            "short": "A1",
            "long": "short name"
        }
    ]

    function lightwell(request, response) {
        function hasMatch(s) {
            return s.toLowerCase().indexOf(request.term.toLowerCase())!==-1;
        }
        var i, l, obj, matches = [];

        if (request.term==="") {
            response([]);
            return;
        }

        for  (i = 0, l = projects.length; i<l; i++) {
            obj = projects[i];
            console.log(obj);
            if (hasMatch(obj.short) || hasMatch(obj.long)) {
                matches.push(obj);
            }
        }
        response(matches);
    }

    $( "#nameSearch" ).autocomplete({
        minLength: 0,
        source: lightwell,
        select: function( event, ui ) {
            $( "#nameSearch" ).val( ui.item.short );
            return false;
        },

    })

    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
            return $("<li class='each'>")
            .append("<div class='acItem'>" +
                "<span class='label'>" + item.short + "</span>" +
                "<span class='long'>" + item.long + "</span>" +
                "</div>")

            .appendTo(ul);
    };
});