Jquery自动完成换行符不起作用

Posted 2023-05-08

【中文标题】Jquery自动完成换行符不起作用

【英文标题】：Jquery autocomplete line breaks not working

【发布时间】：2018-08-16 08:03:16

【问题描述】：

我试图返回三行文本以显示在我的自动完成框中，但正如您在下图中看到的那样，它只显示换行符，但我想要的是 3 行文本。

这是我用来返回数据的 Cakephp 函数。

public function partNumSearch()
    

        if ($this->request->is('ajax')) 
        
            $part = $this->request->query['term'];
            $resultArr = $this->Stocks
            ->find()
            ->where(
                ['Stocks.id LIKE' => ($part . '%')])
                ->orWhere(
                ['Stocks.alternative_part_number LIKE' => ($part . '%')])
                ->orWhere
                (['Stocks.description LIKE' => ($part . '%')]
            );



            $resultsArr = [];
            foreach ($resultArr as $result) 
                   

                 $resultsArr[] = (strval($result['id']) . '\n' . $result['alternative_part_number'] . '\n'. $result['description'] );

            

            $this->set(array(
            'id' => $resultsArr,
            '_serialize' => 'id'
            ));
        
    

这是我的自动完成脚本

jQuery('#part').autocomplete( 
     delay: 0,
source:'<?php echo Router::url(array('controller' => 'Stocks', 'action' => 'partNumSearch')); ?>'
);

【问题讨论】：

把你所有的 php '\n' 改成 "\n" ...

但它可能不会根据 html 显示它们...您最好通过 <br> 代替（再次，取决于显示的每个元素的 css/html）。

像this那样做得更好

将所有的 '\n' 更改为 ''。

@plonknimbuzz 谢谢你的工作！

【参考方案1】：

使用下面的自动完成演示

$(document).ready(function() 
      // #1 - Search configuration - to replace with your own
      var ALGOLIA_APPID = 'latency';
      var ALGOLIA_SEARCH_APIKEY = '6be0576ff61c053d5f9a3225e2a90f76';
      var ALGOLIA_INDEX_NAME = 'actors';
      var NB_RESULTS_DISPLAYED = 5;
      // #2- Algolia Client Initialization
      var algoliaClient = new algoliasearch(ALGOLIA_APPID, ALGOLIA_SEARCH_APIKEY); 
      var index = algoliaClient.initIndex(ALGOLIA_INDEX_NAME);
      var lastQuery = '';

      var array = ['name':'Mehul','name':'Hitesh','name':'Parth'];
      console.log(array);

      $('#MyText').textcomplete([
        
          // #3 - Rgular experession used to trigger search
          match: /(^|\s)@(\w*(?:\s*\w*))$/,
          // #4 - Function called at every new keystroke
          search: function(query, callback) 
           
            lastQuery = query;
            index.search(lastQuery,  hitsPerPage: NB_RESULTS_DISPLAYED )
              .then(function searchSuccess(content) 
                if (content.query === lastQuery) 
                  console.log(content.hits);
                  callback(content.hits);
                
              )
              .catch(function searchFailure(err) 
                console.error(err);
              );
              
          ,
          // #5 - Template used to display each result obtained by the Algolia API
          template: function (hit) 
            // Returns the highlighted version of the name attribute
            return hit._highlightResult.name.value;
          ,
          // #6 - Template used to display the selected result in the textarea
          replace: function (hit) 
            return ' @' + hit.name.trim() + ' ';
                      
        
      ]);
    );

  #MyText 
  border:1px solid #ddd;
  padding: 10px;
  min-height: 40px;
  background: #fff;
  font-size: 14px;
  line-height: 16px;
  width: 100%;
  float: left;
    box-sizing: border-box;

.dropdown-menu 
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);

.dropdown-menu > li > a 
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;

.dropdown-menu 
  font-size: 14px;
  line-height: 16px;
  text-align: left;
  list-style: none;

.dropdown-menu .textcomplete-item.active a 
  background: #F0F0F0;

<label for="MyText">Press @ and write</label>
<div id="MyText" contenteditable="true"></div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.textcomplete/1.8.1/jquery.textcomplete.js"></script>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>