将结果拆分为两列并保留字母顺序

Question

我一直在努力弄清楚如何描述我想做的事情（也许这就是为什么我找不到任何东西告诉我如何......）。我也知道我做事的方法有点混乱，而且并不总是最有效的，但我采用 macgyver 方法，它通常会奏效。

基本上，我有一个表，我一直在以列表的形式回显，其中 auto_incremented id 按插入行的顺序排列，并按字母顺序排列。列表越来越长，我想将其分成两列，同时按字母顺序排列

相关代码：

    // grab tags from database excluding already associated tags
    echo "<ul id='taglist'>";

    $grabTags = "select * from alltags where t_id not in (select t_tid from tags where t_fid = '$fToDis') order by t_text";
    $runTags = mysqli_query($con, $grabTags);
    
    // echo tags
    while($hereTags = mysqli_fetch_assoc($runTags)){
        
        $tagIdRef = $hereTags['t_id'];
        $tagName = $hereTags['t_text'];
        
        echo "<li><div class='ellis'><div class='ell'><p>$tagName</p></div><div class='elr'><div class='bruhp'><form method='post'><input type='hidden' name='$tagIdRef'><input type='submit' class='howbout' value='Add to Film'></form></div></div></div></li>";
        
        // insert tag associations
        if(isset($_POST["$tagIdRef"])){
            
            $fTAddInit = "insert into tags (t_fid, t_tid) values ('$fToDis', '$tagIdRef')";
            $fTAddRun = mysqli_query($con, $fTAddInit);
            
            // refresh on success
            if($fTAddRun){
                
                echo "Tag added successfully, please hold while the page refreshes";
               
                echo "<meta http-equiv='refresh' content='1'>";
                
            }
            
        }
        
    }

我有这个 javascript 搜索过滤器

<div class='searchForms'>
  <input type='text' id='addtagto' onkeyup='jfunAddTag()' placeholder='Filter Existing Tags'>
</div>

<script>

  function jfunAddTag() {

    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById('addtagto');
    filter = input.value.toUpperCase();
    ul = document.getElementById("taglist");
    li = ul.getElementsByTagName('li');

    for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName("p")[0];
      txtValue = a.textContent || a.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }
  }
        
</script>

这是它目前输出的方式：

"official" [Add to Film]
based on book [Add to Film]
boxing [Add to Film]
cold yeehaw [Add to Film]
dog [Add to Film]
emotional [Add to Film]
extreme sports [Add to Film]
gambling [Add to Film]
i disagree [Add to Film]

等等

这就是我想将其更改为输出的方式：

"official" [Add to Film] | based on book [Add to Film]
boxing [Add to Film] | cold yeehaw [Add to Film]
dog [Add to Film] | emotional [Add to Film]
extreme sports [Add to Film] | gambling [Add to Film]
i disagree [Add to Film]

等等

我该怎么做呢？

Answer 1

一个选项是您可以为您已经生成的代码创建 css 规则。

function jfunAddTag() {

  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('addtagto');
  filter = input.value.toUpperCase();
  ul = document.getElementById("taglist");
  li = ul.getElementsByTagName('li');

  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("p")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

#taglist {
  list-style-type: none;
  padding: 0;
}

#taglist li {
  display: inline-block;
  width: 49%;
}

#taglist li .ellis {
  margin: 2px;
  background: #f0f0f0;
  border-radius: 6px;
  padding: 5px;
  text-align: center;
}

.bruhp {
  margin: 0 0 10px 0;
}

input[type="submit"] {
  background: #222;
  color: #fff;
  border-radius: 4px;
}

<div class='searchForms'>
  <input type='text' id='addtagto' onkeyup='jfunAddTag()' placeholder='Filter Existing Tags'>
</div>
<ul id='taglist'>
  <li> 
    <div class='ellis'>
      <div class='ell'>
        <p>"official"</p>
      </div>
      <div class='elr'>
        <div class='bruhp'>
          <form method='post'><input type='hidden' name='n'><input type='submit' class='howbout' value='Add to Film'></form>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class='ellis'>
      <div class='ell'>
        <p>based on the book</p>
      </div>
      <div class='elr'>
        <div class='bruhp'>
          <form method='post'><input type='hidden' name='n'><input type='submit' class='howbout' value='Add to Film'></form>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class='ellis'>
      <div class='ell'>
        <p>boxing</p>
      </div>
      <div class='elr'>
        <div class='bruhp'>
          <form method='post'><input type='hidden' name='n'><input type='submit' class='howbout' value='Add to Film'></form>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class='ellis'>
      <div class='ell'>
        <p>cold yeehaw</p>
      </div>
      <div class='elr'>
        <div class='bruhp'>
          <form method='post'><input type='hidden' name='n'><input type='submit' class='howbout' value='Add to Film'></form>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class='ellis'>
      <div class='ell'>
        <p>dog</p>
      </div>
      <div class='elr'>
        <div class='bruhp'>
          <form method='post'><input type='hidden' name='n'><input type='submit' class='howbout' value='Add to Film'></form>
        </div>
      </div>
    </div>
  </li>
</ul>