VPF::Сделать несколько текстовых полей с ajax-suggest

ok_computer

Дата 20.2.2008, 10:41 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

Необходимо сформировать несколько текстовых полей с подгружаемыми списками. как это лучше сделать (js)?

заранее спасибо.

код

Код


//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
    }
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = escape(document.getElementById('txtSearch').value);
        searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
        searchReq.onreadystatechange = handleSearchSuggest; 
        searchReq.send(null);
    }        
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById('search_suggest')
        ss.innerHTML = '';
        var str = searchReq.responseText.split("\n");
        for(i=0; i < str.length - 1; i++) {
            //Build our element string.  This is cleaner using the DOM, but
            //IE doesn't support dynamically added attributes.
            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;
        }
    }
}

//Mouse over function
function suggestOver(div_value) {
    div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
    div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
    document.getElementById('txtSearch').value = value;
    document.getElementById('search_suggest').innerHTML = '';
}

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html lang="en-US">
    <head>
        <style type="text/css" media="screen">
            body {
                font: 11px arial;
            }
            .suggest_link {
                background-color: #FFFFFF;
                padding: 2px 6px 2px 6px;
            }
            .suggest_link_over {
                background-color: #3366CC;
                padding: 2px 6px 2px 6px;
            }
            #search_suggest {
                position: absolute; 
                background-color: #FFFFFF; 
                text-align: left; 
                border: 1px solid #000000;            
            }    
            #search_suggest2 {
                position: absolute; 
                background-color: #FFFFFF; 
                text-align: left; 
                border: 1px solid #000000;            
            }
    
        </style>
        <script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
    </head>
    <body>
        <h3><a href="http://www.DynamicAJAX.com" style="color: #000000; text-decoration: none;">Simple AJAX Search Suggest</a></h3>
        <div style="width: 500px;">
            <p>
                This script allows you to create a Google Suggest style search box for your website.  The full tutorial
                can be found at <a href="http://www.DynamicAJAX.com">Dyanmic AJAX Suggest Tutorial</a> which includes
                detailed instructions as to what's going on.
            </p>
            <form id="frmSearch" action="http://www.DynamicAJAX.com/search.php">
                <input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off" />
    <input type="text" id="txtSearch2" name="txtSearch2" alt="Search Criteria" onkeyup="searchSuggest2();" autocomplete="off" />                



<input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />
                <div id="search_suggest">
                </div>
            </form>
        </div>
    </body>
</html>

Это сообщение отредактировал(а) ok_computer - 20.2.2008, 10:42

Itsys

Дата 20.2.2008, 12:20 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

Вопрос не понятен.

ok_computer

Дата 20.2.2008, 13:50 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

приведенный выше пример работает для одного input type="text".
необходимо сделать на странице 5 suggestов.
насколько я поняла, в js нужно сформировать необх. getElementById('search_suggest') в цикле.

Itsys

Дата 20.2.2008, 15:36 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

Информация по полям должна обновляться одновременно (т.е. результат обработки зависит от значения всех пяти полей) или каждое поле должно должно обновляться независимо друг от друга?

ok_computer

Дата 21.2.2008, 08:11 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

для каждого поля независимо подгружается список.

значения всех полей формы передаются в базу данных submitом.

Itsys

Дата 21.2.2008, 23:40 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

Тогда тебе проще создать несколько экземпляров функций

Код


//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest1() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = escape(document.getElementById('txtSearch1').value);
        searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
        searchReq.onreadystatechange = handleSearchSuggest1; 
        searchReq.send(null);
    }        
}

//Called when the AJAX response is returned.
function handleSearchSuggest1() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById('search_suggest'1)
        ss.innerHTML = '';
        var str = searchReq.responseText.split("\n");
        for(i=0; i < str.length - 1; i++) {
            //Build our element string.  This is cleaner using the DOM, but
            //IE doesn't support dynamically added attributes.
            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;
        }
    }
}

Код


//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest2() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = escape(document.getElementById('txtSearch'2).value);
        searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
        searchReq.onreadystatechange = handleSearchSuggest2; 
        searchReq.send(null);
    }        
}

//Called when the AJAX response is returned.
function handleSearchSuggest2() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById('search_suggest2')
        ss.innerHTML = '';
        var str = searchReq.responseText.split("\n");
        for(i=0; i < str.length - 1; i++) {
            //Build our element string.  This is cleaner using the DOM, but
            //IE doesn't support dynamically added attributes.
            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;
        }
    }
}

Ну и т.д. и т.п.

Либо написать отдельный класс и инициализировать его для каждого поля (но, я думаю, тебе будет проще первый вариант.

ok_computer

Дата 27.2.2008, 14:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

при выборе в 1 suggeste автоматич. заполняется 2. что исправить? спасибо.

Код




//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
    }
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = escape(document.getElementById('txtSearch').value);
        searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
        searchReq.onreadystatechange = handleSearchSuggest; 
        searchReq.send(null);
    }        
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById('search_suggest')
        ss.innerHTML = '';
        var str = searchReq.responseText.split("\n");
        for(i=0; i < str.length - 1; i++) {
            //Build our element string.  This is cleaner using the DOM, but
            //IE doesn't support dynamically added attributes.
            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;
        }
    }
}

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest1() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = escape(document.getElementById('txtSearch1').value);
        searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
        searchReq.onreadystatechange = handleSearchSuggest1; 
        searchReq.send(null);
    }        
}

//Called when the AJAX response is returned.
function handleSearchSuggest1() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById('search_suggest1')
        ss.innerHTML = '';
        var str = searchReq.responseText.split("\n");
        for(i=0; i < str.length - 1; i++) {
            //Build our element string.  This is cleaner using the DOM, but
            //IE doesn't support dynamically added attributes.
            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;
        }
    }
}








//Mouse over function
function suggestOver(div_value) {
    div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
    div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
    document.getElementById('txtSearch').value = value;
    document.getElementById('search_suggest').innerHTML = '';

    document.getElementById('txtSearch1').value = value;
    document.getElementById('search_suggest1').innerHTML = '';
}

Код


<html lang="en-US">
    <head>
        <style type="text/css" media="screen">
            body {
                font: 11px arial;
            }
            .suggest_link {
                background-color: #FFFFFF;
                padding: 2px 6px 2px 6px;
            }
            .suggest_link_over {
                background-color: #3366CC;
                padding: 2px 6px 2px 6px;
            }
            #search_suggest {
                position: absolute; 
                background-color: #FFFFFF; 
                text-align: left; 
                border: 1px solid #000000;            
            }        
        
#search_suggest1 {
                position: absolute; 
                background-color: #FFFFFF; 
                text-align: left; 
                border: 1px solid #000000;            
            }    



</style>
        <script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
    </head>
    <body>
        <h3><a href="http://www.DynamicAJAX.com" style="color: #000000; text-decoration: none;">Simple AJAX Search Suggest</a></h3>
        <div style="width: 500px;">
            <p>
                This script allows you to create a Google Suggest style search box for your website.  The full tutorial
                can be found at <a href="http://www.DynamicAJAX.com">Dyanmic AJAX Suggest Tutorial</a> which includes
                detailed instructions as to what's going on.
            </p>
            <form id="frmSearch" action="http://www.DynamicAJAX.com/search.php">
                <input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off" />


<input type="text" id="txtSearch1" name="txtSearch1" alt="Search Criteria" onkeyup="searchSuggest1();" autocomplete="off" />

                <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />
                <div id="search_suggest">
                </div>
            </form>
        </div>
    </body>
</html>

Itsys

Дата 27.2.2008, 15:40 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

Цитата(ok_computer @ 27.2.2008, 14:47

)

при выборе в 1 suggeste автоматич. заполняется 2. что исправить? спасибо.

Можно по подробнее что происходит... а то я ничего не понял.

ok_computer

Дата 28.2.2008, 08:26 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

заполняю первое текстовое поле из подгружаемого списка. выбранное значение сразу же автоматически заносится и в первое, и во второе текстовое поле.
задача: 2 поля, 2 независимых списка.

Itsys

Дата 28.2.2008, 11:14 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

Ну конечно у тебя же функция

Код


//Click function
function setSearch(value) {
    document.getElementById('txtSearch').value = value;
    document.getElementById('search_suggest').innerHTML = '';

    document.getElementById('txtSearch1').value = value;
    document.getElementById('search_suggest1').innerHTML = '';
}

Обновляет сразу оба поля.
Разделяй на 2 фукнции, либо передавай в нее номер поля:

Код


//Click function
function setSearch(value, num) {
    document.getElementById('txtSearch' + num).value = value;
    document.getElementById('search_suggest' + num).innerHTML = '';
}

ok_computer

Дата 4.3.2008, 09:06 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

спасибо
если не трудно, приведите пожалуйста весь код.
и js и html.
опять js ошибка

Itsys

Дата 4.3.2008, 19:44 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

В HTML ничего менять не надо, надо только в js:
Вместо

Код


            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>';

Подставить:

Код


            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>';

Код


            var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
            suggest += 'onmouseout="javascript:suggestOut(this);" ';
            suggest += 'onclick="javascript:setSearch(this.innerHTML, '1');" ';
            suggest += 'class="suggest_link">' + str[i] + '</div>';

Соответсвенно, пишу по наитию, т.к. протестировать не могу, из-за отсутсвия серверной части. Поэтому и ошибки могут быть вполне smile

ok_computer

Дата 5.3.2008, 08:41 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

не получается так. ошибка в handleSearchSuggest1() .
если кто то может протестировать у себя.

Код



//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
    }
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = escape(document.getElementById('txtSearch').value);
        searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
        searchReq.onreadystatechange = handleSearchSuggest; 
        searchReq.send(null);
    }        
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById('search_suggest')
        ss.innerHTML = '';
        var str = searchReq.responseText.split("\n");
        for(i=0; i < str.length - 1; i++) {
            //Build our element string.  This is cleaner using the DOM, but
            //IE doesn't support dynamically added attributes.
            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;
        }
    }
}

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest1() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
        var str = escape(document.getElementById('txtSearch1').value);
        searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
        searchReq.onreadystatechange = handleSearchSuggest; 
        searchReq.send(null);
    }        
}

//Called when the AJAX response is returned.
function handleSearchSuggest1() {
    if (searchReq.readyState == 4) {
        var ss = document.getElementById('search_suggest1')
        ss.innerHTML = '';
        var str = searchReq.responseText.split("\n");
        for(i=0; i < str.length - 1; i++) {
            //Build our element string.  This is cleaner using the DOM, but
            //IE doesn't support dynamically added attributes.
         

var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
            suggest += 'onmouseout="javascript:suggestOut(this);" ';
            suggest += 'onclick="javascript:setSearch(this.innerHTML, '1');" ';
            suggest += 'class="suggest_link">' + str[i] + '</div>';

            ss.innerHTML += suggest;
        }
    }
}









//Mouse over function
function suggestOver(div_value) {
    div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
    div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
    document.getElementById('txtSearch').value = value;
    document.getElementById('search_suggest').innerHTML = '';

    
} 
 

function setSearch1(value) {
    document.getElementById('txtSearch').value = value;
    document.getElementById('search_suggest').innerHTML = '';

    document.getElementById('txtSearch1').value = value;
    document.getElementById('search_suggest1').innerHTML = '';
}

searchSuggest.php

Код


<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header("Cache-Control: no-cache, must-revalidate" ); 
header("Pragma: no-cache" );
header("Content-Type: text/xml; charset=utf-8");

//Get our database abstraction file
require('database.php');
///Make sure that a value was sent.
if (isset($_GET['search']) && $_GET['search'] != '') {
    //Add slashes to any quotes to avoid SQL problems.
    $search = addslashes($_GET['search']);
    //Get every page title for the site.
    $suggest_query = db_query("SELECT distinct(title) as suggest FROM suggest WHERE title like('" . 
        $search . "%') ORDER BY title");
    while($suggest = db_fetch_array($suggest_query)) {
        //Return each page title seperated by a newline.
        echo $suggest['suggest'] . "\n";
    }
}
?>

database.php

Код


<?php
/*
    This is the Database Abstraction file for the AJAX Suggest Tutorial
    
    This code was writtin by Ryan Smith of 345 Technical.  This code is
    based on the database abstraction file from osCommerce (http://oscommerce.com)
    All code is provided AS-IS.
    This code is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
    
    For the rest of the code visit http://www.DynamicAJAX.com
    
    Copyright 2006 Ryan Smith / 345 Technical / 345 Group.
*/

//Make the database connection.
  db_connect() or die('Unable to connect to database server!');

//You will need to replace the parameters below with the values for your database connection
//server = the database server (usually localhost).
//username = The user name to connect to the database.
//password = The password to connect to the database.
  function db_connect($server = 'localhost', $username = 'user', $password = '1', $database = 'test', $link = 'db_link') {
    global $$link;

    $$link = mysql_connect($server, $username, $password);

    if ($$link) mysql_select_db($database);

    return $$link;
  }
//Function to handle database errors.
  function db_error($query, $errno, $error) { 
    die('<font color="#000000"><b>' . $errno . ' - ' . $error . '<br><br>' . $query . '<br><br><small><font color="#ff0000">[STOP]</font></small><br><br></b></font>');
  }
//Function to query the database.
  function db_query($query, $link = 'db_link') {
    global $$link;

    $result = mysql_query($query, $$link) or db_error($query, mysql_errno(), mysql_error());

    return $result;
  }
//Get a row from the database query
  function db_fetch_array($db_query) {
    return mysql_fetch_array($db_query, MYSQL_ASSOC);
  }
//The the number of rows returned from the query.
  function db_num_rows($db_query) {
    return mysql_num_rows($db_query);
  }
//Get the last auto_increment ID.
  function db_insert_id() {
    return mysql_insert_id();
  }
//Add HTML character incoding to strings
  function db_output($string) {
    return htmlspecialchars($string);
  }
//Add slashes to incoming data
  function db_input($string, $link = 'db_link') {
    global $$link;

    if (function_exists('mysql_real_escape_string')) {
      return mysql_real_escape_string($string, $$link);
    } elseif (function_exists('mysql_escape_string')) {
      return mysql_escape_string($string);
    }

    return addslashes($string);
  }


?>

дамп в приложении

Присоединённый файл ( Кол-во скачиваний: 4 )

suggest.sql 3,35 Kb

Itsys

Дата 5.3.2008, 09:29 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

К сожалению, не пользуюсь PHP и MySQL... пишу под Perl и MS SQL, поэтому врятли чем помогу smile

ok_computer

Дата 5.3.2008, 10:39 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

а в js все верно?

Sardar

Дата 5.3.2008, 12:24 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Парни... ну вы млин даёте... неделю обсуждать и не сдвинутся с места... smile

Код


function initSuggestField(field) {
    var searchReq = getXmlHttpRequestObject();
    
    var sugwindow = document.createElement('div');
    sugwindow.className = 'search_suggest';
    document.body.appendChild(sugwindow);
    
    field.onkeyup = function () {
        if(searchReq.readyState == 4 || searchReq.readyState == 0) {
            var str = escape(field.value);
            searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
            searchReq.onreadystatechange = handleSearchSuggest; 
            searchReq.send(null);
        }        
    }
    
    function handleSearchSuggest() {
        if (searchReq.readyState == 4) {
            sugwindow.innerHTML = '';
            sugwindow.style.visibility = 'visible';
            var str = searchReq.responseText.split("\n");
            for(i=0; i < str.length; i++) {
                var suggest = document.createElement('a');
                suggest.appendChild(document.createTextNode(str[i]));
                suggest.className = 'suggest_link';
                suggest.href = 'javascript: void(0);';
                suggest.onclick = function() { field.value = this.innerHTML; };
                sugwindow.appendChild(suggest);
            }
        }
    }
}

hover эффекты лучше делать на ссылке, быстрей и проще:

Код


a.suggest_link {
                display: block; /* ссылка теперь блочный элемент, но своего :hover не теряет */
                background-color: #FFFFFF;
                padding: 2px 6px 2px 6px;
            }
            
            a.suggest_link:hover {
                background-color: #3366CC;
            }
            
            .search_suggest {
                position: absolute;
                visibility: hidden;
                background-color: #FFFFFF; 
                text-align: left; 
                border: 1px solid #000000;            
            }

Код


<input type="text" id="test" alt="Search Criteria" autocomplete="off" />
<script type="text/javascript">
    initSuggestField(document.getElementById('test'));
</script>

Перебираем любыми путями все необходимые input'ы, инициализируем фичу. Осторожно, писал за минуту на коленке без проверки, могут быть синтаксические ошибки.

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

ok_computer

Дата 5.3.2008, 13:02 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

ошибка не удалось загрузить страницу. операция прервана

зы я не парень)

Itsys

Дата 5.3.2008, 14:42 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

Нет, конечно, я же писал:

Код


//Click function
function setSearch(value, num) {
    document.getElementById('txtSearch' + num).value = value;
    document.getElementById('search_suggest' + num).innerHTML = '';
}

Она остается одна - последнюю функцию

Код


function setSearch1(value) {
    document.getElementById('txtSearch').value = value;
    document.getElementById('search_suggest').innerHTML = '';

    document.getElementById('txtSearch1').value = value;
    document.getElementById('search_suggest1').innerHTML = '';
}

убирай

Sardar

Дата 5.3.2008, 15:59 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(ok_computer @ 5.3.2008, 12:02

)

ошибка не удалось загрузить страницу. операция прервана

Что в консоли написано? Заметь, я в исходник getXmlHttpRequestObject не добавил, полагая что ты сама об этом догадаешься... smile

Приведи полный листинг страницы.

Itsys создание массы setSearch*() и searchSuggest*(), только потому что обращаемся к объектам по id - это страшный по своей не эффективности (глупости) приём, особенно если количество полей требующих suggest'а может изменятся от страницы к странице. Не в обиду smile

--------------------

Itsys

Дата 5.3.2008, 17:05 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34

Цитата(Sardar @ 5.3.2008, 15:59

)

создание массы setSearch*() и searchSuggest*(), только потому что обращаемся к объектам по id - это страшный по своей не эффективности (глупости) приём, особенно если количество полей требующих suggest'а может изменятся от страницы к странице. Не в обиду

Не в обиду... я в самом начале предлагал....

Цитата(Itsys @ 21.2.2008, 23:40

)

Либо написать отдельный класс и инициализировать его для каждого поля (но, я думаю, тебе будет проще первый вариант)

Добавлено через 7 минут и 35 секунд

Цитата(Sardar @ 5.3.2008, 15:59

)

setSearch*(

И setSearch один.... smile

ok_computer

Дата 6.3.2008, 09:28 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html lang="en-US">
    <head>
        <style type="text/css" media="screen">
            body {
                font: 11px arial;
            }
           
          
.suggest_link {
                display: block; /* ссылка теперь блочный элемент, но своего :hover не теряет */
                background-color: #FFFFFF;
                padding: 2px 6px 2px 6px;
            }
            
            a.suggest_link:hover {
                background-color: #3366CC;
            }
            
            .search_suggest {
                position: absolute;
                visibility: hidden;
                background-color: #FFFFFF; 
                text-align: left; 
                border: 1px solid #000000;            
            }


    
        </style>

<script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
    

</head>
    <body>
        <h3><a href="http://www.DynamicAJAX.com" style="color: #000000; text-decoration: none;">Simple AJAX Search Suggest</a></h3>
        <div style="width: 500px;">
      
            <form id="frmSearch" action="http://www.DynamicAJAX.com/search.php">

<input type="text" id="test" alt="Search Criteria" onkeyup="initSuggestField(document.getElementById('test')); "  autocomplete="off" />




           



<input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />
                <div id="search_suggest">
                </div>
            </form>
        </div>
    </body>
</html>

Код


//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
    }
}


function initSuggestField(field) {
    var searchReq = getXmlHttpRequestObject();
  
  
    var sugwindow = document.createElement('div');
    sugwindow.className = 'search_suggest';
    document.body.appendChild(sugwindow); 
    
    field.onkeyup = function () {
        if(searchReq.readyState == 4 || searchReq.readyState == 0) {
            var str = escape(field.value); 
            searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
            searchReq.onreadystatechange = handleSearchSuggest; 
            searchReq.send(null);
       }       
    }
    
    function handleSearchSuggest() {
        if (searchReq.readyState == 4) {
            sugwindow.innerHTML = '';
            sugwindow.style.visibility = 'visible';
            var str = searchReq.responseText.split("\n");
            for(i=0; i < str.length; i++) {
                var suggest = document.createElement('a');
                suggest.appendChild(document.createTextNode(str[i]));
                suggest.className = 'suggest_link';
                suggest.href = 'javascript: void(0);';
                suggest.onclick = function() { field.value = this.innerHTML; };
                sugwindow.appendChild(suggest);
            }
        }
    }
}

Это сообщение отредактировал(а) ok_computer - 6.3.2008, 13:15

ok_computer

Дата 6.3.2008, 13:03 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

всем большое спасибо)

как сделать чтобы sugwindow были под каждым инпутом.
они наслаиваются друг на друга

Это сообщение отредактировал(а) ok_computer - 6.3.2008, 13:20

Sardar

Дата 6.3.2008, 13:39 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

После 18 строки добавь sugwindow.style.left = field.offsetLeft + 'px'; Аналогично для.top + fielf.offsetHeight.
Если input'ы в контейнерах на релативной/абсолютной позиции лежат, то потребуется пробежать по .offsetParent'ам до html, что бы правильно позицию input'а расчитать. Вбей offsetParent в поиск если не понятно.

--------------------

ok_computer

Дата 7.3.2008, 08:12 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1

спасибо)

Yens

Дата 10.7.2008, 13:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 2.7.2008

Репутация: нет
Всего: нет

А как быть в случае, если в коде

Код


suggest.onclick = function() { field.value = this.innerHTML; };

Строка

Код


 this.innerHTML == ''

Т.е. Скрипт возвращает в какой-то момент пустое значение. Как сделать так, чтобы в таком случае вызывалась что-то типа

Код


sugwindow.style.visibility = 'hidden';

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »