sparklechic007
-
Posts
7 -
Joined
-
Last visited
Never
Everything posted by sparklechic007
-
ignore my query, I seem to be a fan of posting things and then figuring it out myself. sorry for the post hijack!
-
Hi, I have another query about the autosuggest. I use it with a search, however when the user types in an entry they have to click on one of the matching entries from the autosuggest list and then click on the submit button to perform the search. The search query queries the database for any text in the search field. I tried using 'document.search.submit' but this only searches for the data already in the textfield, for example if the user types 'a' and then clicks on 'apple' from the suggestions list they are shown results from the database that match 'a' rather than 'apple.' I'm not silly, I know I can't use a JS onclick to call a PHP function. I'm thinking this is an AJAX query, any ideas on how I would query the result the user clicks on rather than just what they've typed into the database and direct them automatically to the results rather than the need of the submit button?
-
Silly me, I left out the id of the textfield. Boy do I feel silly!
-
Hi, I'm wondering if anyone can tell me if there's a work around for calling js files in php. Basically, I have an autosuggest field which is calling from a database. However, when I try to use the js by using 'require_once' in php if I click on one of the entries on the autosuggest list it won't fill the textfield. If I include the .js file in <html> at the top of the page I get 'headers already sent (by my configuration file linking to the database).' I've also tried to include the <script> in the php instead using single quotes but this doesn't work. I can't change my configuration file as it's used by other pages, and I can't really put the form into a separate html file because it uses other code as well for when the actual submit button is sent (this is separate from the autosuggest). All I'm wondering is if there's another way to call the javascript in the PHP
-
AJAX, MySQL, PHP autocomplete search field
sparklechic007 replied to sparklechic007's topic in Javascript Help
was problem with JS, solved it myself -
AJAX, MySQL, PHP autocomplete search field
sparklechic007 replied to sparklechic007's topic in Javascript Help
OK so I stripped it down and found out I had a few errors to do with browser compatibility. I'm still unable to pull the query results from searchS.php and populate the text field. I think it has something to do with this line: searchReq.open("GET", 'searchS.php?search=' + str, true); The URL changes to searchS.php?search= (plus whatever the user input is but no autocomplete in the textfield). My JS file now looks like this: <script language='JavaScript' type="text/javascript"> function getXmlHttpRequest(){ var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } else{ try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch(e1){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e2) {} } } if(!xmlhttp){ alert('cannot create XMLHTTP instance'); return false; } return xmlhttp; } var searchReq = getXmlHttpRequest(); function handleSearchSuggest(){ var ss = document.getElementById('search_s'); ss.innerHTML = ''; var str = searchReq.responseText.split("\n"); for(i=0; i < str.length - 1; i++){ var suggest = '<div onmouseover="javascript:suggestOver(this);"'; suggest += 'onmouseout="javascript:suggestOut(this);"'; suggest += 'onclick="javascript:setSearch(this.innerHTML);"'; suggest += 'class="suggest_link">' + str[i] + '<\/div>'; ss.innerHTML += suggest; } } function searchS(){ if(searchReq.readyState == 4 || searchReq.readyState === 0){ var str = escape(document.getElementById('q').value); searchReq.open("GET", 'searchS.php?search=' + str, true); searchReq.onreadystatechange = handleSearchSuggest; searchReq.send(null); } } function suggestOver(div_value){ div_value.className = 'suggest_link_over'; } function suggestOut(div_value){ div_value.className = 'suggest_link'; } function setSearch(value){ document.getElementById('q').value = value; document.getElementById('search_suggest').innerHTML = ''; } </script> The search.php form looks like: $body .= ' <form name="searchForm" id="searchForm" action="search.php" method="get"> <fieldset class="search"> <legend>Search</legend> <p>Search filenames, bookmarks and entities.</p> <input type="text" name="q" id="q" size="60" onkeyup="searchS();" autocomplete="off"/> <input type="hidden" name="s" value="0" /> <input type="hidden" name="l" value="10" /><br/><br/> <input type="submit" value="Search" name="btn" class="btn"/> <div id="search_s"></div> </fieldset> </form>'; And searchS.php is attached [attachment deleted by admin] -
I have a search form where on user input matching details from the MySQL database are returned. This all works fine. However, I want to have an autocomplete field based on previous searches (search_history) table in the database. I've looked at a few examples online but I can't get it to work. I've debugged the code and there are no errors so I can't see why it isn't working, hopefully you can help me There are 3 files: search.php contains the main form for user input; searchS.php queries the database for entries in the search_history table that match the user input for the autocomplete; the ajax_search.js is shown below <script language='JavaScript' type="text/javascript"> //form validation method function ValidateForm(){ var q=document.searchForm.q //check that the search field is not blank if ((q.value==null)||(q.value=="")){ alert("Search field can't be blank!") q.focus() return false } return true } function GetXmlHttpObject(){ var xmlHttp=null; try{ //Firefox, Safari, Opera 8.0+ xmlHttp=new XMLHttpRequest(); } catch(e( { //IE try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } //get browser specific xmlhttprequest object function getXmlHttpRequestObject(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); } else if (window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Upgrade Browser"); } } //get the autocomplete var searchR = getXmlHttpRequestObject(); //search method - keyup call function searchS() { var q = document.searchForm.q; //start AJAX request if (searchR.readyState == 4 || searchR.readyState == 0) && q.value.length > 2) { var st = escape(document.getElementById('q').value); searchR.open("GET", '"searchS.php"?q=' + st, true); searchR.onreadystatechange = handleSearchS; searchR.send(null); } } //method to be called when AJAX response returned function handleSearchS(){ if(searchR.readyState == 4){ var ss = document.getElementById('search_s') ss.innerHTML = ''; var st = searchR.responseText.split("\n"); for(i=0; i < st.length - 1; i++){ //build element string - IE does not support dynamically added attributes var s = '<div onmouseover = "javascript:suggestOver(this);" '; s += 'onmouseout="javascript:suggestOut(this);"'; s += 'onclick="javascript:setS(this.innerHTML);"'; s += 'class="suggest_link>' + st[i] + '</div>'; ss.innerHTML += s; } } } //mouseover function suggestOver(div_value){ div_value.className = 'suggest_link_over'; } //mouseout function suggestOut(div_value){ div_value.className = 'suggest_link'; } //click function setS(value){ document.getElementById('q').value = value; document.getElementById('search_s').innerHTML = ''; } </script> the css is in an external stylesheet but the code relating to the autocomplete is listed below: search_s { position: absolute; background-color: #FFFFFF; text-align: left; border: 1px solid #000000; color: #000000; display: block; margin: 0 0 0 0.2em; padding: 0 0 0 0; z-index: 50000; } .suggest_link { margin: 0 0 0 0; padding: 4px 3px 4px 3px; min-width: 12em; } .suggest_link_over { font-weight: bolder; margin: 0 0 0 0; padding: 4px 3px 4px 3px; min-width: 12em; } What am I doing wrong? The form search.php has to be 'get' for the actual search once the 'submit' button is clicked to work. [attachment deleted by admin]