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

Question

我试图返回三行文本以显示在我的自动完成框中，但正如您在下图中看到的那样，它只显示换行符，但我想要的是 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')); ?>'
});

Answer 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>