Find matched letter from each word in javascript array
Question
I have an array in javascript like that :
var books = ['spring','last night','sweet heart','the sky','tomorrow'] ;
I have textarea
<textarea id="text" name="textpreview" class="text"></textarea>
So what I want is when I enter letter s then I will get two suggestions books just the first word not the second word I mean not sky Just spring and sweet heart .
I will get two spans
<textarea id="text" name="textpreview" class="text"></textarea>
<span>spring</span>
<span>sweet heart</span>
If I type again after s the p letter like sp in textarea then I will get just spring
<textarea id="text" name="textpreview" class="text"></textarea>
<span>spring</span>
and so on .
If I type n I will get nothing.
If I type t I will get tomorrow and the sky
Hope it can be done . Thanks for your support .
3 answers
solution1
3 ACCPTED 2016-06-29 19:44:35
This help you :
<html> <head> <title></title> </head> <body> <textarea id="text" name="textpreview" class="text"></textarea> <p id="x"></p> <script> var x = document.getElementById("x"); var books = ['spring','last night','sweet heart','last night','the sky','tomorrow','tomorrow']; var txt = document.getElementById("text"); txt.onkeyup = function(event) { var str = ""; var arr = []; var index = (txt.value).indexOf("@"); if(index !== -1 && (txt.value).substr(index + 1).length > 0) { var value = (txt.value).substr(index + 1); value = value.replace(/[\\.\\+\\*\\\\\\?]/g,'\\\\$&'); var patt = new RegExp("^" + value); for(var i=0; i<books.length; i++) { if(patt.test(books[i]) && arr.indexOf(books[i]) === -1) { arr.push(books[i]); } } } if (arr.length < 1 ) x.innerHTML = ""; else { for(var i=0; i<arr.length; i++) str+=arr[i]+"<br>"; x.innerHTML = str; } } </script> </body> </html>
solution2
0 2016-06-29 19:36:38
This problem consists of two parts: Reading and writing your input/output from/to the DOM, and filtering your array books .
The reading and writing part should be easy, there are plenty of guides on how to achieve this.
To filter the books array, JavaScript offers a number of helpful functions:
var books = ['spring','last night','sweet heart','the sky','tomorrow']; var input = 'S'; var result = books.filter(function(book) { return book.toLowerCase().indexOf(input.toLowerCase()) === 0; }).slice(0, 2); console.log(result); // ['spring', 'sweet heart']
solution3
0 2016-06-29 20:17:33
@TimoSta is correct that this is a two-part problem.
I expanded on his code a bit using angular to display the results in the DOM.
HTML:
<div ng-controller="MyCtrl">
<textarea id="text" name="textpreview" class="text" ng-model="startsWith"></textarea>
<span ng-repeat="book in sortedBooks()">{{ book }}</span>
</div>
Javascript:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.books = ['spring','last night','sweet heart','the sky','tomorrow'];
$scope.sortedBooks = function () {
var sortedBooks = [];
for (var i = 0; i < $scope.books.length; i++){
if ($scope.books[i].toLowerCase().indexOf($scope.startsWith.toLowerCase()) === 0)
sortedBooks.push($scope.books[i]);
}
return sortedBooks;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.