Własna wyszukiwarka na stronę WWW w Javascript

16 Stycznia 2019

Witam, znalazłem na stronie MathMed : blog lekarza medycyny skrypt na wyszukiwarkę w Javascript, natomiast mam problem z dostosowaniem go pod moją stronę.

W paczce znajdują się dwa plikI:

Spoiler


<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="baza.js"></script>
<script src="plot.js"></script>
</head>
<body onload="initEngine()">
<div style="font-family:arial; font-size:12px; width:450px; border:1px dotted #000000;">
	<div style="margin:10px;"><b>wyszukiwarka kalorycznośći posiłków: (można wpisywać tekst jak na przykład <a href='javascript:document.getElementById("searchedPhrase").value="kurczak skrzydełko";initEngine();'>kurczak skrzydełko</a></b></div>

	
<input type="text" id="searchedPhrase" style="width:350px;  margin:10px" onkeydown="setInterv()">
<input type="button" value="szukaj" onclick="initEngine()" style="float:right; margin:10px">
<div id="outputArea" style="height:200px;overflow:auto;margin:10px"></div>

</div>
<script>
var phraseMatchArray;
var refreshInterval = 0;
var lastSearchedValue;
var phraseMinimumLength = 2;
var wordMinimumLength = 2;
//////////////////////////////////////////////////// clear match array
function initMatchedPhrasesArray() {
	for(var i=0;i<produkty.length;i++) {
	phraseMatchArray[i]=0;
	}
}
//////////////////////////////////////////////////// find phrase matches
function matchedPhrasesMaximum() {
var topMatches = 1;
	for(var i=0,len=phraseMatchArray.length;i<len;i++) {
	if (phraseMatchArray[i]>topMatches) topMatches=phraseMatchArray[i];
	}
	return topMatches;
}
//////////////////////////////////////////////////// print final results
function printResults(sortedResults) {
var outputArea = document.getElementById("outputArea");
outputArea.innerHTML="";

	for(var i=0;i<sortedResults.length;i++) {
	 var searchPhrase=produkty[sortedResults[i].matchedPhraseDataBaseIndex].split(",");
	 var searchPhraseReadyForGoogle=searchPhrase[0].replace(" ","+");
	outputArea.innerHTML+= '<b>'+ (i+1) + ': ' + searchPhrase[0] + '</b>, '+ searchPhrase[1] + 'kcal/100g <br>';
	outputArea.innerHTML+= '(białko: ' + searchPhrase[2] + 'g, tłuszcze: ' +  searchPhrase[3] + 'g, węglowodany: ' + searchPhrase[4] + 'g) , '
	outputArea.innerHTML+= '<a href="https://www.google.pl/search?hl=pl&q='+searchPhraseReadyForGoogle+'+przepisy'+'">przepisy</a> '  + '<br>';
	}
}
//////////////////////////////////////////////////// bubble sort according to phrase matches
function sortResults() {
outputArea.innerHTML+="";
var sortedArray = new Array();
	var count=0;
	for(var i=0,len=phraseMatchArray.length;i<len;i++) {
		if (phraseMatchArray[i]>matchedPhrasesMaximum()-1) {
		var sortedPair = {matchedPhraseDataBaseIndex:i, sortedBy:phraseMatchArray[i] };
		sortedArray[count] = sortedPair;
		count++;
		}
	}

	do {
	var flipsNumber=0;
		for(var i=1,len=sortedArray.length; i<len;i++) {
			if (sortedArray[i].sortedBy>sortedArray[i-1].sortedBy) {
			var tmpVar = sortedArray[i];
			sortedArray[i] = sortedArray[i-1];
			sortedArray[i-1] = tmpVar;
			flipsNumber++;
			}
		}
	} while (flipsNumber>0);
	
	return sortedArray;
}
//////////////////////////////////////////////////// searches query element in database array
function searchQueryElement(phrase) {
	for(var i=0, len=produkty.length;i<len;i++) {
	var result = produkty[i].search(phrase);
		if(result!=-1) {
		phraseMatchArray[i]++;
		}
	}
}
////////////////////MASTER ELEMENT////////////////// divides query into single words and searches, sorts, prints
function performSearch(totalExperssion) {
 var cursorPosition=0;
 var resultsArray=totalExperssion.split(" ");
 if (totalExperssion.length>phraseMinimumLength) {
	do {
		if (resultsArray[cursorPosition].length>wordMinimumLength) {
		searchQueryElement(resultsArray[cursorPosition]);
		}
	cursorPosition++;
	} while (resultsArray.length>=(cursorPosition+1));
	
	
	var sortedArray = sortResults();
	printResults(sortedArray);
 }
}
////////////////////////////////////////////////////
//////////////////////////////////////////////////// init function 
function initEngine() {
 var searchedPhrase = document.getElementById("searchedPhrase");
 phraseMatchArray = new Array();
 initMatchedPhrasesArray();
 performSearch(searchedPhrase.value);
}
////////////////////////////////////////////////////
//////////////////////////////////////////////////// check if user ended writing according to interval
function checkSearch() {
 var searchedPhrase = document.getElementById("searchedPhrase");
	if (lastSearchedValue!=searchedPhrase.value) {
	lastSearchedValue = searchedPhrase.value;
	} else {
	 clearInterval(refreshInterval);
	 refreshInterval = 0;
	 initEngine();
	}
}
//////////////////////////////////////////////////// sets interval 
function setInterv() {
	if (refreshInterval != 0) {
	clearInterval(refreshInterval);
	refreshInterval = setInterval("checkSearch()",300);
	} else {
	refreshInterval = setInterval("checkSearch()",300);
	}
}
////////////////////////////////////////////////////
</script>
</body>

var produkty = new Array("bagietka francuska,285,8.1,1.6,60.6","bajgiel,223,8.8,1.6,46.5","żur z kiełbasą,93,7.4,6.0,2.8");

Ja natomiast chciałbym edytować to żeby po wpisaniu "WMAA130363T001241" lub "PNT 28279" przekierowywało do "/gwast.html#gwast_1", niestety edycja rekordu na następujący:

var rekordy = new Array("WMAA130363T001241, PNT 28279, /gwast.html#gwast_1","VF6R332A100000509, PNT 23592, /gwast.html#gwast_2");

Ni przynosi rezultatów. Próbowałem coś zmieniać w sekcji "print final results" pliku napisanego w html, gdyż moim zdaniem któraś z tamtych linijek zmienia automatycznie na wyszukiwanie googlowskie. Jak waszym zdaniem powinien wyglądać ten kod?

Edytowane 27 Stycznia 2019 przez Pretty Little Psycho

16 Stycznia 2019

A wyszukiwać ma w bazie?

To samym JSem tego nie zrobisz. Chyba, że na sztywno zdefiniujesz to co można wyszukać.

16 Stycznia 2019

Tak, chce mu na sztywno zdefiniować, że jak ktoś wpiszę dany numer VIN to ma mu wyskoczyć link do tego pojazdu.

16 Stycznia 2019

No to prościej to będzie zrobić w takiej postaci:

var list = {};
list['vin1'] = 'link1';
list['vin2'] = 'link2';

Teraz wystarczy, że się odniesiesz do indexu, który jest numerem VIN i dostaniesz link do pojazdu.

PS. Minus jest taki, że musisz wpisać cały VIN do 'wyszukiwarki'.

Edytowane 16 Stycznia 2019 przez Pretty Little Psycho

16 Stycznia 2019

Ale przy tym twoim przykładzie jak powinna wyglądać w html strona z wyszukiwarką? Tak jak wklejona w moim 1 poście?

16 Stycznia 2019

A co ma wygląd strony do funkcjonalności wyszukiwarki?

Trzeba będzie to jeszcze okodować.

Najpierw wyszukać po 'wyrywku' VIN, który zwróci listę potencjalnego wyboru (to będzie najtrudniejsze zadanie dla Ciebie :P), a później to już tylko ładnie to wyświetlić i na zdarzeniu 'click' wybrać ten konkretny VIN, który już zwróci link.

16 Stycznia 2019

Pierwsza rzecz: Nie bierzemy 1:1 kodu z czyjejś strony, tylko poznajemy logikę działania i na tej podstawie odtwarzamy własny kod.

Druga sprawa: Można zrobić to tak jak napisał Pretty Little Psycho. Ja zrobiłbym to tak, że na sztywno dane zachowałbym w postaci JSON a potem przy pomocy regexa przy wpisywaniu danych do inputa szukałbym po 'rekordach'.

Zrobiłem szybki przykład:

[hide]

https://codepen.io/Mativve/pen/wRZPop

[/hide]

Może nie jest on jakoś super napisany ale względnie logika do tego co napisałem wyżej.

Można ewentualnie zrobić tak, że zamiast szukać w elementach HTML, można przeszukać listę JSON i na tej podstawie wygenerować listę (lecz wydaje mi się, że ciągłe generowanie może spowolnić działanie jeśli rekordów jest więcej).

16 Stycznia 2019

Z tym że w twoim przykładzie jest spis VINów pod wyszukiwarką, a ja chce same pole wyszukiwarki gdzie po wpisaniu numeru VIN użytkownik otrzymałby odnośnik do strony gdzie bardziej jest opisany pojazd o danym VINie, przykład takiego odnośnika podałem w 1 poście, chodzi o np. /gwast.html#gwast_1 w momencie gdy wyszukiwarkę ulokuję w pliku index.html

16 Stycznia 2019

Masz gotowca, dostosuj go pod siebie. Zrezygnuj z tabeli z przeszukuj całą tablicę z danymi JSON:

Zamiast

const vins = [
  {vin:"2HGFG12646H574345", car:"Marka pojazdu 1", driver: "Imię kierowcy 1"},
  {vin:"1GTCT14W8S8546980", car:"Marka pojazdu 2", driver: "Imię kierowcy 2"},
  {vin:"1FDWW3AR1AEA45004", car:"Marka pojazdu 3", driver: "Imię kierowcy 3"},
  {vin:"WBA3A5C5XCF464197", car:"Marka pojazdu 4", driver: "Imię kierowcy 4"},
{vin:"JYA43G003EA045545", car:"Marka pojazdu 5", driver: "Imię kierowcy 5"},
];

Zrób sobie

const vins = [
  {vin:"2HGFG12646H574345", link:"linkdoinformacji"},
  {vin:"1GTCT14W8S8546980", link:"linkdoinformacji"},
  {vin:"1FDWW3AR1AEA45004", link:"linkdoinformacji"},
  {vin:"WBA3A5C5XCF464197", link:"linkdoinformacji"},
{vin:"JYA43G003EA045545", link:"linkdoinformacji"},
];

I zamiast od razu przekierowywać to informować użytkownika, że znaleziono viny (i ilość) a potem przypisać link np: do jakiegoś przycisku bądź linku i gotowe.

17 Stycznia 2019

Chyba to za bardzo mnie przerasta. Coś takiego mi wyszło ale coś nie chce pokazywać linku:

<div class="search">
<label for="vinSearch">Szukaj VIN <small>(Zacznij wpisywać)</small></label>
<input type="text" id="vinSearch">  
</div>

<table>
  <thead>
  <tr>
    <th>VIN</th>
    <th>Link</th>
  </tr>    
  </thead>
  <tbody id="vinTable">
    
  </tbody>
</table>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
}

.search{
  padding:12px;
}

table{
  margin:12px;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  border-spacing: 0;
}

table th,
table td{
  padding:6px;
}

const vins = [
  {vin:"2HGFG12646H574345", link:"linkdoinformacji"},
  {vin:"1GTCT14W8S8546980", link:"linkdoinformacji"},
  {vin:"1FDWW3AR1AEA45004", link:"linkdoinformacji"},
  {vin:"WBA3A5C5XCF464197", link:"linkdoinformacji"},
{vin:"JYA43G003EA045545", link:"linkdoinformacji"},
];

let vinSearch = $("#vinSearch"),
    vinList = $("#vinTable");

function generateList(){
  let html = "";
  $.each(vins, function(i, v){
    html += `<tr data-vin="${v.vin}"><td>${v.link}</td></tr>`;
  });
  vinList.html(html);
}
generateList();


vinSearch.on("input", function(){
  let v = $(this).val(),
      reg = new RegExp(v,'gmi');
  
  let trows = vinList.find("[data-vin]");
  trows.each(function(){
    let tvin = $(this).data("vin");
    
    (reg.test(tvin)) ? $(this).show() : $(this).hide();
    
  });
});

17 Stycznia 2019

Zapraszam do działu zleceń w takim razie ☺️ rzucisz komuś kilka 'groszy' i będziesz mieć profesjonalnie* zrobione.

* pod warunkiem, że to będzie osoba, która zna się na rzeczy

21 Stycznia 2019

@Pretty Little Psycho, oczywiście dodane w zleceniach:

Temat do zamknięcia

Zaloguj się

Własna wyszukiwarka na stronę WWW w Javascript

bubbles

Odnośnik do komentarza

Udostępnij na innych stronach

-n3veR

Odnośnik do komentarza

Udostępnij na innych stronach

bubbles

Odnośnik do komentarza

Udostępnij na innych stronach

-n3veR

Odnośnik do komentarza

Udostępnij na innych stronach

bubbles

Odnośnik do komentarza

Udostępnij na innych stronach

-n3veR

Odnośnik do komentarza

Udostępnij na innych stronach

Mativve

Odnośnik do komentarza

Udostępnij na innych stronach

bubbles

Odnośnik do komentarza

Udostępnij na innych stronach

Mativve

Odnośnik do komentarza

Udostępnij na innych stronach

bubbles

Odnośnik do komentarza

Udostępnij na innych stronach

-n3veR

Odnośnik do komentarza

Udostępnij na innych stronach

bubbles

Odnośnik do komentarza

Udostępnij na innych stronach

Sklep

O nas

Więcej

Sklep

O nas

Więcej